\n {data.svg(selected === data.link ? \"white\" : \"#9E9FA1\")}\n
\n ) : data.image ? (\n \n \n \n
\n \n // Your free trial allows access to both the team health,\n // and emotional health survey's. To continue your innerlogic\n // experience, please upgrade your account in the billing section.\n //
\n // })\n // }\n // if (organization?.payment_status > 3) {\n // setPaymentAlert({\n // header: \n // You may not be able access to team health,\n // and emotional health survey's any longer. To continue your innerlogic\n // experience, please complete your payment in the billing section.\n //
\n // })\n // }\n // }, [organization])\n // account_type === 5 is admin\n // console.log(checkForStaff)\n // if (typeof IsStaff == \"boolean\") {\n // \t// variable is a boolean\n // \tconsole.log(\"IsStaff Boolean\")\n // }\n // // console.log(Number(AmbassadorId))\n // console.log(typeof IsStaff);\n\n return (\n {employee?.account_type === 5 && paymentAlert?.header}
\n \n {get_SelectedOrg?.organization?.name &&\n get_SelectedOrg?.organization?.name}\n
\n \n {data.svg(selected === data.link ? \"white\" : \"#9E9FA1\")}\n
\n ) : data.image ? (\n \n \n \n
\n \n // Your free trial allows access to both the team health,\n // and emotional health survey's. To continue your innerlogic\n // experience, please upgrade your account in the billing section.\n //
\n // })\n // }\n // if (organization?.payment_status > 3) {\n // setPaymentAlert({\n // header: \n // You may not be able access to team health,\n // and emotional health survey's any longer. To continue your innerlogic\n // experience, please complete your payment in the billing section.\n //
\n // })\n // }\n // }, [organization])\n // account_type === 5 is admin\n // console.log(checkForStaff)\n // if (typeof IsStaff == \"boolean\") {\n // \t// variable is a boolean\n // \tconsole.log(\"IsStaff Boolean\")\n // }\n // // console.log(Number(AmbassadorId))\n // console.log(typeof IsStaff);\n\n return (\n {employee?.account_type === 5 && paymentAlert?.header}
\n \n {get_SelectedOrg?.organization?.name &&\n get_SelectedOrg?.organization?.name}\n
\n \n \n \n
\n \n // Your free trial allows access to both the team health,\n // and emotional health survey's. To continue your innerlogic\n // experience, please upgrade your account in the billing section.\n //
\n // })\n // }\n // if (organization?.payment_status > 3) {\n // setPaymentAlert({\n // header: \n // You may not be able access to team health,\n // and emotional health survey's any longer. To continue your innerlogic\n // experience, please complete your payment in the billing section.\n //
\n // })\n // }\n // }, [organization])\n // account_type === 5 is admin\n // console.log(checkForStaff)\n // if (typeof IsStaff == \"boolean\") {\n // \t// variable is a boolean\n // \tconsole.log(\"IsStaff Boolean\")\n // }\n // // console.log(Number(AmbassadorId))\n // console.log(typeof IsStaff);\n\n return (\n {employee?.account_type === 5 && paymentAlert?.header}
\n \n {get_SelectedOrg?.organization?.name &&\n get_SelectedOrg?.organization?.name}\n
\n \n {data.svg(selected === data.link ? \"white\" : \"#9E9FA1\")}\n
\n ) : data.image ? (\n \n \n \n
\n \n // Your free trial allows access to both the team health,\n // and emotional health survey's. To continue your innerlogic\n // experience, please upgrade your account in the billing section.\n //
\n // })\n // }\n // if (organization?.payment_status > 3) {\n // setPaymentAlert({\n // header: \n // You may not be able access to team health,\n // and emotional health survey's any longer. To continue your innerlogic\n // experience, please complete your payment in the billing section.\n //
\n // })\n // }\n // }, [organization])\n // account_type === 5 is admin\n // console.log(checkForStaff)\n // if (typeof IsStaff == \"boolean\") {\n // \t// variable is a boolean\n // \tconsole.log(\"IsStaff Boolean\")\n // }\n // // console.log(Number(AmbassadorId))\n // console.log(typeof IsStaff);\n\n return (\n {employee?.account_type === 5 && paymentAlert?.header}
\n \n {get_SelectedOrg?.organization?.name &&\n get_SelectedOrg?.organization?.name}\n
\n \n {registerError && (\n setRegisterError(false)}\n // header={props.message}\n content={registerError}\n />\n )}\n
\n );\n};\n\nexport default UserErrorMessages;","import React, { useState, useEffect, useContext } from \"react\";\nimport { Message } from \"semantic-ui-react\";\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { useSearchParams } from \"react-router-dom\";\nimport styled from \"styled-components\";\nimport Input from \"./InputLogin\";\nimport { ValidateEmail } from \"utilities/Validate\";\nimport { SG_FORGOT_PASSWORD } from \"constants/actions\";\n// import Logo from \"assets/images/logo_blue.png\";\n// import NuWave from \"assets/images/nav/nuwave_black.png\";\n\nimport Select from \"react-select\";\n\nimport UserErrorMessages from \"./UserErrorMessages\";\nimport { DomainContext } from 'layouts/LayoutContext';\n\n// const email_validation =\n// /^(([^<>()\\[\\]\\.,;:\\s@\\\"]+(\\.[^<>()\\[\\]\\.,;:\\s@\\\"]+)*)|(\\\".+\\\"))@(([^<>()[\\]\\.,;:\\s@\\\"]+\\.)+[^<>()[\\]\\.,;:\\s@\\\"]{2,})$/i;\n\n// const SL = 'https://firebasestorage.googleapis.com/v0/b/charactercode-a247a.appspot.com/o/email%2FPicture1.png?alt=media&token=223020fd-96d0-4549-aec8-615ef47e5562'\n\nconst ForgotPassword = () => {\n const dispatch = useDispatch();\n\n // let [searchParams, setSearchParams] = useSearchParams();\n // let logo = searchParams.get(\"org\");\n const Domain = useContext(DomainContext)\n\n const [email, setEmail] = useState('')\n const [orgList, setOrgList] = useState([])\n const [selectedOrg, setSelectedOrg] = useState(false)\n\n const [formErrors, setFormErrors] = useState([]);\n const [pristine, setPristine] = useState(true);\n\n const { get_auth } = useSelector(\n (state) => ({\n get_auth: state.auth\n }),\n shallowEqual\n );\n\n useEffect(() => {\n const ErrorList = [];\n let totalErrors = 0\n if (email?.length === 0) {\n ErrorList[\"email\"] = {\n error: true,\n message: \"Please enter a email\"\n };\n totalErrors += 1\n } else {\n if (!ValidateEmail(email)) {\n ErrorList[\"email\"] = {\n error: true,\n message: \"Please enter a valid email\"\n };\n totalErrors += 1\n }\n }\n\n if (orgList?.length > 0) {\n if (!selectedOrg.OrganizationID) {\n ErrorList[\"organization\"] =\n {\n error: true,\n message: \"Please select an Organization\"\n };\n totalErrors += 1\n }\n }\n\n ErrorList['errors'] = totalErrors\n\n setFormErrors(ErrorList);\n }, [email, selectedOrg, orgList, pristine]);\n\n useEffect(() => {\n if (get_auth?.forgot_password) {\n setOrgList(get_auth?.forgot_password?.organization_list)\n }\n }, [get_auth]);\n\n function emailValue(e) {\n // console.log(e)\n setEmail(e)\n\n }\n\n useEffect(() => {\n if (get_auth?.forgot_password?.email) {\n setEmail(get_auth?.forgot_password?.email)\n }\n }, [get_auth?.forgot_password]);\n\n\n const onSubmit = () => {\n if (formErrors?.errors > 0) {\n setPristine(false);\n return;\n }\n dispatch({\n type: SG_FORGOT_PASSWORD,\n payload: {\n email: email,\n organization_id: selectedOrg?.OrganizationID\n },\n });\n ResetForm()\n\n };\n\n function ResetForm() {\n setEmail('')\n setPristine(true);\n setFormErrors([])\n }\n\n\n return (\n \n Login\n
\n \n Login\n
\n \n \n
\n\n\n
*/}\n ) \n}\n\nexport default GoogleAuth;\n","import React from 'react';\nimport styled from \"styled-components\";\n\nconst MandatoryLinks = ({ Domain }) => {\n\n const today = new Date()\n return (<>\n {/* {Domain.allowRegister &&\n Copyright © {today.getFullYear()} innerlogic.com
\n\n {success && (
\n );\n};\n\nexport default Logout;\n","\nimport React, { useState, useEffect, useContext } from \"react\";\nimport { Link, useNavigate, useSearchParams } from \"react-router-dom\";\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\n\nimport { DomainContext } from 'layouts/LayoutContext';\n\nimport styled from \"styled-components\";\n\nimport {\n SG_RESET_PASSWORD,\n CLEAR_PASSWORD_DATA,\n CLEAR_ERRORS,\n CLEAR_ALL,\n} from \"constants/actions\";\n\n\nimport Input from \"./InputLogin\";\n\n// import Background from \"assets/images/login.jpg\";\n\nimport UserErrorMessages from \"./UserErrorMessages\";\nimport { Message, Loader } from \"semantic-ui-react\";\n\n\n\nconst UpgradePassword = () => {\n const dispatch = useDispatch();\n let navigate = useNavigate();\n const Domain = useContext(DomainContext)\n\n let [searchParams, setSearchParams] = useSearchParams();\n const token = searchParams.get(\"token\");\n\n // const [domain, setDomain] = useState(window.location.hostname);\n\n const [password1, setPassword1] = useState('')\n const [password2, setPassword2] = useState('')\n\n const [formErrors, setFormErrors] = useState([]);\n const [pristine, setPristine] = useState(true);\n const [errorResp, setErrorResp] = useState(false)\n const [msgResp, setMsgResp] = useState(false)\n\n const [success, setSuccess] = useState(false) \n\n const { get_auth, get_error } = useSelector(\n (state) => ({\n get_auth: state.auth,\n get_error: state.errors,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n \n if (msgResp === \"please log back in using the new password\") {\n setSuccess(true)\n const timer1 = setTimeout(() => {\n\n setSuccess(false)\n dispatch({\n type: CLEAR_PASSWORD_DATA,\n });\n navigate(\"/account/login\")\n }, 5000);\n return () => clearTimeout(timer1);\n }\n }, [msgResp, dispatch, navigate]);\n\n\n useEffect(() => {\n setMsgResp(false)\n setErrorResp(get_auth?.reset_password?.error)\n if (get_auth.reset_password?.message) {\n setMsgResp(get_auth.reset_password?.message)\n } \n \n }, [get_auth]);\n\n // useEffect(() => {\n // // const timer1 = setTimeout(() => {\n // if (get_auth.register_org?.next_steps === 1) {\n // navigate(\"/account/validate-account\");\n // }\n // // }, 5000);\n // // return () => clearTimeout(timer1);\n // }, [navigate, get_auth.register_org]);\n\n useEffect(() => {\n const ErrorList = [];\n let totalErrors = 0\n\n if (!token) {\n ErrorList[\"token\"] = {\n error: true,\n message: \"no token found\"\n };\n totalErrors += 1\n } else {\n if (password1?.length === 0) {\n ErrorList[\"password1\"] = {\n error: true,\n message: \"Please enter a password\"\n };\n totalErrors += 1\n }\n\n if (password1 !== password2) {\n ErrorList[\"password2\"] = {\n error: true,\n message: \"Passwords dont match\"\n };\n totalErrors += 1\n }\n\n if (password2?.length === 0) {\n ErrorList[\"password2\"] = {\n error: true,\n message: \"Please enter password again\"\n };\n totalErrors += 1\n }\n }\n ErrorList['errors'] = totalErrors\n\n setFormErrors(ErrorList);\n\n }, [\n password1, password2, pristine, token\n ]);\n\n function password1Value(e) {\n if (e) {\n setPassword1(e)\n }\n }\n\n function password2Value(e) {\n if (e) {\n setPassword2(e)\n }\n }\n\n const onSubmit = () => {\n if (formErrors?.errors > 0) {\n setPristine(false);\n return;\n }\n dispatch({\n type: CLEAR_ALL,\n });\n\n dispatch({\n type: SG_RESET_PASSWORD,\n payload: {\n new_password: password1,\n token: token\n },\n });\n setPristine(true);\n };\n\n return (\n \n {success && (\n <>\n
\n\n\n {/* \n Login\n
\n \n \n If the email you entered is found in our records we would shortly send\n you an email with password reset instructions\n
\n\n\n Back to login\n
\n \n\t\t\t\t\tOh, no! \n\t\t\t\t\tWe're usually ready to show you the insights you need but we couldn’t come up with what you’re looking for. \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n
\n When it comes to culture feedback, an average of{\" \"}\n
\n
\n This cycle is unsustainable and costs organizations{\" \"}\n
\n
\n With innerlogic, our AI culture copilot links your people data to{\" \"}\n
\n
\n
\n
# of hours currently spent = [Question 4 how often] x\n [Question 6 how long] x 8 hours per day based on 40 hour work\n week] - # hours spent using innerlogic (90% time saved) = #\n hours saved\n
\n\t\t\t\t\tCool! \n\t\t\t\t\tIt's all good \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\tOh, no! \n\t\t\t\t\tWe're usually ready to show you the insights \n you but we could not come up with what you’re \n looking for. \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\tNot Subscribed! \n\t\t\t\t\tWe're usually ready to show you the insights \n you but we could not come up with what you're \n looking for. Please check your subscription \n for this pack! \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\tNo Access! \n\t\t\t\t\tWe're usually ready to show you the insights \n you but we could not come up with what you're \n looking for. Please check your access level \n for this information! \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n 
props.change(3)} />\n 
props.change(2)} />\n
\n \n\t{visible ? {team.name} {team.id} Team \n\t : \n\t
\n\t )\n\n}\n\nexport default CreateEdit","import { useForm, Controller } from \"react-hook-form\";\nimport React, { useEffect, useState } from \"react\";\n\nimport {\n StyledInput,\n InviteBox,\n SentContainer,\n Sent,\n LeaderContainer,\n InviteButton,\n} from \"../styled-list\";\n\nimport { Message } from \"semantic-ui-react\";\n\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport {\n REGISTER_EMPLOYEE\n} from \"constants/actions\";\n\nconst Invite = (props) =>{\n\tconst apiDispatch = useDispatch();\n\tconst methods = useForm();\n\tconst { register, handleSubmit, control, reset, errors } = methods;\n\n\n\tconst [sent,setSent] = useState(false)\n\tconst [sendMember,setSendMember] = useState(false)\n\tconst [member,setMember] = useState(\"\")\n\tconst org_id = useSelector((state) => state.auth.organization_id)\n\n\n\tconst invite = () =>{\n\t\t\tif(props.department){\n\t\t\tapiDispatch({\n\t\t type: REGISTER_EMPLOYEE,\n\t\t\t payload:{\n\t\t\t \temail:member,\n\t\t\t organization: org_id,\n\t\t role: props.role_id,\n\t\t picture: null,\n\t\t team: props.team_id,\n\t\t \tdepartment:props.department},\n\t\t\t });\t\t\n\t\t\t}else{\n\t\t\tapiDispatch({\n\t\t type: REGISTER_EMPLOYEE,\n\t\t\t payload:{\n\t\t\t \temail:member,\n\t\t\t organization: org_id,\n\t\t role: props.role_id,\n\t\t picture: null,\n\t\t team: props.team_id},\n\t\t\t });\t\n\t\t\t}\n\t\t\t\t\n\t}\n\n\n\tconst inviteMember = () => {\n\t\tinvite()\n\t setMember(\"\");\n\t setSendMember(false)\n\t if(props.role_id==1){\n\t \tsetSent(false);\n\t }else{\n\t \tsetSent(true);\n\t \tprops.send()\n\t }\n\t \n\t \n\t };\n\n\tconst settingMember = (e) => {\n\t if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(e.target.value)) {\n\t setSendMember(true);\n\t setMember(e.target.value);\n\t } else {\n\t setMember(e.target.value);\n\t }\n\t };\n\n\treturn (\n\t\t\n\t \n\t
\n\t }\n\t \n\t\t\t{\n\t\t\t\tprops.invited.map((item,i)=>{\n\t\t\t\t\treturn
\n\t)\n}\n\n\nexport default UserList","import React, { useEffect, useState } from \"react\";\nimport { Icon } from \"semantic-ui-react\";\n\nimport \"./team.css\";\n\nimport { useForm, Controller } from \"react-hook-form\";\nimport { Message } from \"semantic-ui-react\";\nimport Selection from './Selection'\nimport CreateEdit from './CreateEdit'\nimport Invite from './Invite'\nimport UserList from './userList'\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport {\n UPDATE_EMPLOYEE,\n LOAD_EMPLOYEES,\n} from \"constants/actions\";\n\n\nimport {\n Text,\n SubText,\n Hide,\n TeamContainer,\n InvitedContainer,\n} from \"../styled-list\";\n\n\nconst TeamCard = (props) => {\nconst dispatch = useDispatch();\n const [visible, setVisible] = React.useState(false);\n const [leaderSent, setLeaderSent] = React.useState(false);\n const [team, setTeam] = React.useState(false);\n const [invite,setInvite] = React.useState(false)\n\n const [invited, setInvited] = React.useState([]);\n\n\n React.useEffect(() => {\n \tif(team?.id){\n \t\tdispatch({\n type: LOAD_EMPLOYEES,\n payload: {params: team? `&team=${team.id}` : null}\n });\n \t}\n \n }, [dispatch, team]);\n\n const { get_employees } = useSelector(\n (state) => ({\n get_employees: state.employees,\n }),\n shallowEqual\n );\n\n React.useEffect(() => {\n if (get_employees?.employees) {\n setInvited(get_employees.employees);\n if(get_employees.employees.length){\n \tprops.complete()\n }\n \n }\n }, [get_employees]);\n\n\n return (\n \n\t{visible ? {department.name} {department.id} Department \n\t : \n\t
\n\t )\n\n}\n\nexport default CreateEdit","import { useForm, Controller } from \"react-hook-form\";\nimport React, { useEffect, useState } from \"react\";\n\nimport {\n StyledInput,\n InviteBox,\n SentContainer,\n Sent,\n LeaderContainer,\n InviteButton,\n} from \"../styled-list\";\n\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport {\n REGISTER_EMPLOYEE\n} from \"constants/actions\";\n\nconst Invite = (props) =>{\n\tconst apiDispatch = useDispatch();\n\tconst [sent,setSent] = useState(false)\n\tconst [sendMember,setSendMember] = useState(false)\n\tconst [member,setMember] = useState(\"\")\n\tconst org_id = useSelector((state) => state.auth.organization_id)\n\n\n\tconst invite = () =>{\n\t\t\tapiDispatch({\n\t\t type: REGISTER_EMPLOYEE,\n\t\t\t payload:{\n\t\t\t \temail:member,\n\t\t\t organization: org_id,\n\t\t role: props.role_id,\n\t\t picture: null,\n\t\t department: props.department_id},\n\t\t\t });\t\t\n\t}\n\n\n\tconst inviteMember = () => {\n\t\tinvite()\n\t setMember(\"\");\n\t setSendMember(false)\n\t if(props.role_id==1){\n\t \tsetSent(false);\n\t }else{\n\t \tsetSent(true);\n\t \tprops.send()\n\t }\n\t \n\t \n\t };\n\n\tconst settingMember = (e) => {\n\t if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(e.target.value)) {\n\t setSendMember(true);\n\t setMember(e.target.value);\n\t } else {\n\t setMember(e.target.value);\n\t }\n\t };\n\n\treturn (\n\t\t\n\t \n\t
\n\t }\n\t \n \n {props.department.name} Department \n\n {created.length>=selected && selected!=0? back()}\n >\n back\n
:\"\" }\n \n {visible === 1 ? change(i)} /> : \"\"}\n {visible === 2 ? change(i)} back={()=>setVisible(1)}/> : \"\"}\n {visible === 3 ? change(i)} back={()=>setVisible(1)}/> : \"\"}\n
\n );\n};\n\nexport default CreateTeam;","import React, { useEffect, useState } from \"react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport { Input, Button, Loader, Dimmer, Form, TextArea } from \"semantic-ui-react\";\nimport styled from \"styled-components\";\n\nimport {\n SG_POST_CHAT_GPT,\n} from \"constants/actions\";\n\nconst QueryChatGpt = () => {\n const dispatch = useDispatch();\n\n const [formErrors, setFormErrors] = useState([]);\n const [pristine, setPristine] = useState(true);\n\n\n const [text, setText] = useState(\"\");\n const [prompt, setPrompt] = useState(\"\");\n\n const [loading, setLoading] = useState(false);\n const [chatGptResp, setChatGptResp] = useState({})\n\n function FetchChatGpt() {\n if (formErrors?.errors > 0) {\n setPristine(false);\n return;\n }\n\n setLoading(true)\n dispatch({\n type: SG_POST_CHAT_GPT,\n payload: {\n request: {\n gpt_text: text,\n prompt: prompt\n }\n },\n });\n }\n\n function ClearChatGpt() {\n setFormErrors([])\n setPristine(true);\n setText('')\n setPrompt('')\n setLoading(false)\n }\n\n const {\n get_chat_gpt_resp,\n } = useSelector(\n (state) => ({\n get_chat_gpt_resp: state.chat_gpt.chat_gpt,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n setLoading(get_chat_gpt_resp.pending)\n setChatGptResp(get_chat_gpt_resp)\n }, [get_chat_gpt_resp]);\n\n\n useEffect(() => {\n const ErrorList = [];\n let totalErrors = 0\n if (text?.length === 0) {\n ErrorList[\"text\"] = {\n error: true,\n message: \"Please enter the content\"\n };\n totalErrors += 1\n }\n if (prompt?.length === 0) {\n ErrorList[\"prompt\"] = {\n error: true,\n message: \"Please enter the prompt\"\n };\n totalErrors += 1\n }\n ErrorList['errors'] = totalErrors\n setFormErrors(ErrorList);\n }, [text, prompt, pristine]);\n\n return (\n \n {/* */}\n\n \n \n
\n );\n}\n\nexport default ChatGptPages;","import React, { useState, useEffect, useRef } from \"react\";\nimport Dropzone from \"react-dropzone\";\nimport { Slider } from \"react-semantic-ui-range\";\nimport AvatarEditor from \"react-avatar-editor\";\nimport styled, { keyframes } from 'styled-components';\nimport { useDispatch } from \"react-redux\";\n\nimport { Dimmer, Loader, Image, Segment, Button } from 'semantic-ui-react'\n\nimport { UPDATE_ORGANIZATION_LOGO, PULL_ORGANIZATION } from \"constants/actions\";\n\nvar EXIF = require(\"exif-js\");\n\n\n\nconst ImageUpload = ({ organization }) => {\n const dispatch = useDispatch();\n // fakeImage.image_url\n const [image, setImage] = useState(false);\n const [newImage, setNewImage] = useState(true);\n const [editing, setEditing] = useState(null);\n const setEditorRef = useRef(null);\n\n const [imageUpdated, setImageUpdated] = useState(false)\n\n useEffect(() => {\n if (organization) {\n // setEmployee(organization);\n if (organization?.logo) {\n\n setImage(organization.logo);\n setNewImage(false)\n\n }\n }\n }, [organization]);\n\n // console.log(organization.logo)\n // console.log(image)\n\n useEffect(() => {\n\n const timer1 = setTimeout(() => {\n if (imageUpdated) {\n dispatch({\n type: PULL_ORGANIZATION,\n payload: {\n id: organization.id\n },\n });\n setImageUpdated(false)\n }\n\n }, 1000)\n return () => clearTimeout(timer1)\n }, [dispatch, imageUpdated, organization]);\n\n function dataURLtoBlob(dataURL) {\n var array, binary, i;\n binary = atob(dataURL.split(\",\")[1]);\n array = [];\n i = 0;\n while (i < binary.length) {\n array.push(binary.charCodeAt(i));\n i++;\n }\n return new Blob([new Uint8Array(array)], {\n type: \"image/png\",\n });\n }\n\n const onClickSave = () => {\n if (setEditorRef.current) {\n // This returns a HTMLCanvasElement, it can be made into a data URL or a blob,\n // drawn on another canvas, or added to the DOM.\n\n // If you want the image resized to the canvas size (also a HTMLCanvasElement)\n const canvasScaled = setEditorRef.current.getImageScaledToCanvas();\n\n let image_file = dataURLtoBlob(canvasScaled.toDataURL());\n var myFile = new File([image_file], \"name.png\");\n if (organization) {\n // // update employee\n dispatch({\n type: UPDATE_ORGANIZATION_LOGO,\n payload: {\n id: organization.id,\n logo: myFile,\n },\n });\n setImageUpdated(true)\n }\n }\n };\n\n const handleDrop = (dropped) => {\n // var that = this;\n setImage(dropped[0]);\n\n };\n\n return (\n <>\n \n {!newImage ?
\n \n Organization \n\n \n
\n \n );\n};\n\nexport default Organization;\n\n\nconst Title = styled.div`\n font-size: 28px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n margin-top: 60px;\n margin-bottom: 30px;\n\n @media (max-width: 768px) {\n margin-top: 10px;\n }\n`;\n\nconst Label = styled.div`\n font-size: 16px;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n\nconst Button = styled.button`\n height: 45px;\n border-radius: 8px;\n background-color: #6a00ff;\n color: white;\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 7px 24px 7px 24px;\n border: none;\n outline: none;\n margin-top: 80px;\n`;\n\nconst FormContainer = styled.div`\n display: flex;\n flex-direction: row;\n\n @media (max-width: 768px) {\n flex-direction: column;\n }\n`;\nconst FormSection = styled.div`\n width: 40%;\n margin-right: 30px;\n\n @media (max-width: 768px) {\n width: 100%;\n margin-bottom: 40px;\n }\n`;","import React from \"react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport { Message, Button } from \"semantic-ui-react\";\n\nimport { useToasts } from 'react-toast-notifications'\n\nimport {\n CLEAR_ERRORS\n } from \"constants/actions\";\n\n\n export const ToastDemo = ({ content }) => {\n const { addToast } = useToasts()\n return (\n \n )\n }\n\nexport function AllErrors() {\n const dispatch = useDispatch();\n const [visible, SetVisible] = React.useState(false);\n const [errorList, SetErrorList] = React.useState(false);\n\n const { get_errors } = useSelector(\n (state) => ({\n get_errors: state.errors.errors,\n }),\n shallowEqual\n );\n\n\n React.useEffect(() => {\n if (get_errors?.data) {\n SetErrorList(get_errors.data);\n SetVisible(true);\n }\n }, [get_errors]);\n\n function DismissError() {\n SetVisible(false);\n dispatch({\n type: CLEAR_ERRORS\n });\n }\n\n if (visible) {\n return (\n \n
\n );\n } else {\n return null;\n }\n}\nexport function DismissableError(props) {\n const dispatch = useDispatch();\n const { addToast } = useToasts()\n const [visible, SetVisible] = React.useState(true);\n\n function DismissError() {\n SetVisible(false);\n dispatch({\n type: CLEAR_ERRORS\n });\n }\n\n function ShowToast() {\n addToast(props.message\n ? props.message\n : \"There was an error, please try again\", {\n appearance: 'success',\n autoDismiss: true,\n })\n }\n if (visible) {\n return (\n \n
\n );\n } else {\n return null;\n }\n}\nexport function ToastMessage(props) {\n const { addToast } = useToasts()\n return (\n \n addToast(props.message\n ? props.message\n : \"There was an error, please try again\", {\n appearance:props.appearance? props.appearance :'success',\n autoDismiss: true,\n })\n \n )\n}\n\nexport function DismissableSuccess(props) {\n // const dispatch = useDispatch();\nconst [visible, SetVisible] = React.useState(props.visible);\nconst { addToast } = useToasts()\nfunction DismissError() {\n SetVisible(false);\n \n}\n\n\nReact.useEffect(() => {\n \n SetVisible(props.visible);\n\n}, [props,addToast]);\n\nif (visible) {\n return (\n \n
\n );\n} else {\n return null;\n}\n}\n","import styled, { keyframes } from \"styled-components\";\n\nexport const Container = styled.div`\n display:flex;\n flex-direction:row;\n\n @media (max-width:768px){\n flex-direction:column;\n position:relative;\n }\n`\n\nexport const Toggled = styled.div`\n @media (max-width:768px){\n position:absolute;\n top:0;\n right:0;\n }\n`\n\nexport const Title = styled.div`\n font-size: 28px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n margin-top: 50px;\n margin-bottom: 22px;\n\n @media (max-width:768px){\n margin-top:0;\n font-size:20px;\n }\n`;\n\nexport const OtherContainer = styled.div`\n width:100%;\n display:flex;\n flex-direction:column;\n\n`\n\nexport const Title2 = styled.div`\n font-size: 20px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n\nexport const Title3 = styled.div`\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n color: #4a4a4a;\n`;\n\nexport const Warning = styled.div`\n font-size: 14px;\n font-family: \"Red Hat Display\", sans-serif;\n color: #ff2d55;\n`;\n\nexport const Title4 = styled.div`\n font-size: 25px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n color: white;\n\n @media (max-width:768px){\n font-size:18px;\n }\n`;\n\n// export const Title = styled.div`\n// \tfont-size: 28px;\n// font-weight: bold;\n// font-family: 'Red Hat Display', sans-serif;\n// margin-top:40px;\n// margin-bottom:22px;\n// `\n\n// export const Title2 = styled.div`\n// \tfont-size: 20px;\n// font-weight: bold;\n// font-family: 'Red Hat Display', sans-serif;\n// `\n\n\n// export const Title3 = styled.div`\n// \tfont-size: 25px;\n// font-weight: bold;\n// font-family: 'Red Hat Display', sans-serif;\n// `\n\nexport const P = styled.div`\n font-size: 16px;\n font-weight: 500;\n color: #4a4a4a;\n font-family: \"Red Hat Display\", sans-serif;\n line-height: 1.31;\n`;\n\nexport const P2 = styled.div`\n font-size: 14px;\n color: #9b9b9b;\n font-family: \"Red Hat Display\", sans-serif;\n margin-bottom: 0px;\n margin-top:10px;\n\n @media (max-width:768px){\n margin-bottom:0;\n }\n`;\nexport const P3 = styled.div`\n font-size: 16px;\n color: #9b9b9b;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n\n// export const P = styled.div`\n// \t font-size: 16px;\n// font-weight: 500;\n// color: #9b9b9b;;\n// font-family: 'Red Hat Display', sans-serif;\n// line-height: 1.31;\n// margin-bottom:40px;\n// `\n\n// export const P2 = styled.div`\n// \t font-size: 16px;\n// color: #4a4a4a;\n// font-family: 'Red Hat Display', sans-serif;\n// line-height: 1.31;\n//`\n\nexport const Line = styled.div`\n width: 100%;\n border-bottom: solid 1px #e9e9e9;\n margin: 36px 0px 36px 0px;\n\n @media (max-width:768px){\n margin:10px 0 10px 0;\n }\n`;\n\n\nexport const Line2 = styled.div`\n width: 100%;\n border-bottom: solid 1px #e9e9e9;\n margin: 5px 0px 10px 0px;\n\n @media (max-width:768px){\n margin:5px 0 10px 0;\n }\n`;\n\nexport const SettingsCard = styled.div`\n padding: 36px 22px 7px 24px;\n border-radius: 20px;\n z-index: 1;\n box-shadow: 0 2px 40px 0 rgba(218, 218, 218, 0.5);\n width: calc(50% - 36px);\n margin-bottom: 36px;\n position:relative;\n\n @media (max-width:768px){\n width:100%;\n }\n`;\n\nexport const LeaderContainer = styled.div`\n padding:0 10px 0 10px;\n max-width:700px;\n\n @media (max-width:768px){\n padding:0 10px 0 10px;\n }\n\n`\n\nexport const PersonalityCard = styled.div`\n padding: 36px 22px 7px 24px;\n border-radius: 20px;\n box-shadow: 0 2px 40px 0 rgba(218, 218, 218, 0.5);\n width: calc(50% - 36px);\n margin-bottom: 36px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n @media (max-width:768px){\n width:100%;\n height:150px;\n \n }\n`;\n\nexport const Img = styled.img`\n width: 50px;\n height: 45px;\n margin-right: 22px;\n\n @media (max-width:768px){\n margin-bottom:20px;\n }\n`;\n\nexport const View = styled.span`\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n color: #6a00ff;\n display: flex;\n align-items: center;\n cursor: pointer;\n`;\n\nexport const Arrow = styled.span`\n font-size: 18px;\n margin-left: 15px;\n`;\n\nexport const Button = styled.div`\n padding:15px;\n height: 45px;\n border-radius: 8px;\n background-color: #6a00ff;\n color: white;\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n\nexport const ToggleContainer = styled.div`\n width: 31px;\n height: 12px;\n border-radius: 6px;\n background-color: ${(props) => props.color};\n cursor: pointer;\n position: relative;\n`;\n\nexport const Circle = styled.div`\n width: 20px;\n height: 20px;\n background-color: ${(props) => props.color};\n border-radius: 10px;\n position: absolute;\n left: ${(props) => props.position};\n top: -4px;\n transition: left 200ms ease-in;\n`;\n\nexport const TopBar = styled.div`\n background-color: #5800d4;\n color: white;\n padding: 36px 0px 29px 44px;\n\n @media (max-width:768px){\n padding: 36px 0px 29px 20px;\n }\n`;\n\nexport const Oval = styled.div`\n width: 24px;\n height: 24px;\n border-radius: 12px;\n background-color: ${(props) => (props.selected ? \"#6a00ff\" : \"#d8d8d8\")};\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-right: 14px;\n min-width: 24px;\n`;\n\n// export const Oval = styled.div`\n// \twidth: 24px;\n// height: 24px;\n// border-radius:12px;\n// background-color: ${props=>props.selected ? '#6a00ff':'#d8d8d8'};\n// display:flex;\n// align-items:center;\n// justify-content:center;\n// cursor:pointer;\n// margin-right:14px;\n// min-width:24px;\n// `\n\nexport const Highlight = styled.div`\n font-size: 16px;\n font-weight: bold;\n color: #7f00ff;\n font-family: \"Red Hat Display\", sans-serif;\n cursor: pointer;\n`;\n\n\nexport const Participants = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n justify-content: space-between;\n margin-top: 10px;\n`;\n\nexport const BottomBar = styled.div`\n background-color: #5800d4;\n color: white;\n padding: 9px 24px 10px 44px;\n display: flex;\n justify-content: flex-end;\n`;\n\nexport const CoreSettingBar = styled.div`\n color: white;\n display: flex;\n justify-content: space-between;\n flex-direction: \"row\";\n width:600px;\n z-index: 999;\n \n\n @media (max-width:768px){\n width:100%;\n margin-bottom:40px;\n position:relative;\n }\n`;\n\nexport const CoreTimeZoneBar = styled.div`\n color: black;\n display: flex;\n justify-content: space-between;\n flex-direction: \"row\";\n width:600px;\n z-index: 999;\n \n\n @media (max-width:768px){\n width:100%;\n position:relative;\n }\n`;\n\nexport const Save = styled.div`\n width: 150px;\n height: 50px;\n border-radius: 9px;\n background-color: #ffffff;\n color: #6a00ff;\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex; \n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin: ${props => props.margin ? props.margin : 0};\n\n @media (max-width:768px){\n position:absolute;\n right:0;\n bottom:-40px;\n height:auto;\n width:auto;\n }\n`;\n\nexport const SelectContainer = styled.div`\n width: 188px;\n height: 50px;\n border-radius: 8px;\n background-color: #e9e9e9;\n display: flex;\n align-items: center;\n padding-left: 24px;\n font-size: 16px;\n font-weight: bold;\n color: #4a4a4a;\n font-family: \"Red Hat Display\", sans-serif;\n position: relative;\n z-index: 1;\n margin-right: ${props => props.margin ? props.margin : 0};\n margin-top:10px;\n\n @media (max-width:768px){\n padding-left:10px;\n width:150px;\n font-size:13px;\n }\n`;\n\n// export const SelectContainer = styled.div`\n// \twidth: 188px;\n// height: 50px;\n// border-radius: 8px;\n// background-color: #e9e9e9;\n// display:flex;\n// align-items:center;\n// padding-left:24px;\n// font-size: 16px;\n// font-weight: bold;\n// color: #4a4a4a;\n// font-family: 'Red Hat Display', sans-serif;\n// position:relative;\n// z-index:1;\n// `\n\nexport const show = keyframes`\n\t0% {margin-right:10px;opacity:0}\n 100% {margin-right:0px;opacity:1}\n`;\n\nexport const EmployeeSelect = styled.div`\n display:flex;\n flex-direction:row;\n width:calc(50% - 45px);\n border-bottom:1px solid #e9e9e9;\n padding:10px 0px 10px 0px;\n\n @media (max-width:768px){\n width:100%;\n padding:10px 0 10px 0;\n }\n`\n\n\nexport const LeaderAvatar = styled.img`\n height: 150px;\n width: 150px;\n border-radius: 75px;\n margin-top:12px;\n margin-bottom:20px;\n opcacity:0;\n animation: ${props=>show} 300ms linear 0s 1 forwards;\n\n`;\nexport const LeaderAvatarIcon = styled.img`\n height: 30px;\n width: 30px;\n border-radius: 5px;\n margin-bottom:15px;\n opcacity:0;\n animation: ${props=>show} 300ms linear 0s 1 forwards;\n\n`;\n\nexport const LeaderName = styled.div`\n\tfont-size: 23px;\n\tfont-weight: bold;\n\tfont-family: 'Red Hat Display', sans-serif;\n\n @media (max-width:768px){\n font-size:14px;\n }\n\n`\n\n\n\nexport const Selection = styled.div`\n\tbackground-color:white;\n\twidth:100%;\n\tposition:absolute;\n\tdisplay:flex;\n\tflex-direction:column;\n\topacity:${props=>props.open? 1: 0};\n\ttransition:opacity 300ms ease-in;\n`\n\nexport const OptionCard = styled.div`\n padding: 28px 28px 30px 28px;\n border-radius: 8px;\n background-color: #f8f8f8;\n margin-top:20px;\n`\nexport const MobileInvite = styled.div`\n \n @media(min-width:768px){\n display:none;\n }\n`\n\nexport const InviteContainer = styled.div`\n display:flex;\n flex-direction:row;\n @media (max-width:768px){\n display:none;\n }\n`\n\nexport const Card = styled.div`\n\t height: 75px;\n\t width:100%;\n\t border-radius: 10px;\n\t box-shadow: 0 4px 20px 0 #ececec;\n\t background-color: #ffffff;\n\t display:flex;\n\t flex-direction:row;\n\t justify-content:space-between;\n\t align-items:center;\n\t padding:24px;\n\t margin-bottom:24px;\n\n @media (max-width:768px){\n height:auto;\n }\n`\n\nexport const Name = styled.div`\n\tfont-size: 16px;\n\tfont-weight: 500;\n\tcolor: #4a4a4a;\n\tfont-family: 'Red Hat Display', sans-serif;\n`\nexport const Email = styled.div`\n font-size: 14px;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n`\n\n\nexport const Avatar = styled.img`\n height: 30px;\n width: 30px;\n border-radius: 15px;\n margin-right:16px;\n`;\n\nexport const IconContainer = styled.div`\n\tcolor:white;\n\twidth:32px;\n\theight:32px;\n\tborder-radius:16px;\n\tbackground-color:${props=>props.color};\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n\tmargin-right:5px;\n\tcursor:pointer;\n\n`\n\n\n// export const LeaderAvatar = styled.img`\n// height: 150px;\n// width: 150px;\n// border-radius: 75px;\n// margin-top:12px;\n// margin-bottom:20px;\n// opcacity:0;\n// animation: ${props=>show} 300ms linear 0s 1 forwards;\n\n// `;\n\n// export const LeaderName = styled.div`\n// \tfont-size: 23px;\n// \tfont-weight: bold;\n// \tfont-family: 'Red Hat Display', sans-serif;\n\n// `\n// export const Participants = styled.div`\n// \tdisplay:flex;\n// \tflex-wrap:wrap;\n// \twidth:100%;\n// \tjustify-content:space-between;\n// \tmargin-top:28px;\n\n// `\n\n// export const BottomBar = styled.div`\n// \t background-color:#5800d4;\n// color:white;\n// padding:9px 24px 10px 44px;\n// display:flex;\n// justify-content:flex-end;\n// `\n\n// export const Save = styled.div`\n// \twidth: 150px;\n// height: 50px;\n// border-radius: 9px;\n// background-color: #ffffff;\n// color:#6a00ff;\n// font-size: 16px;\n// font-weight: bold;\n// font-family: 'Red Hat Display', sans-serif;\n// display:flex;\n// align-items:center;\n// justify-content:center;\n// cursor:pointer;\n// `\n","export default \"data:image/png;base64,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\"","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\n\nimport Select from \"react-select\";\n// import { Modal, Message } from \"semantic-ui-react\";\nimport { Grid, Icon, Modal, Button, Image, Header } from \"semantic-ui-react\";\n\nimport { Link } from \"react-router-dom\";\nimport DatePicker from \"react-datepicker\";\nimport {AllErrors, DismissableSuccess, DismissableError, ToastMessage} from \"utilities/Messages\"\n\nimport {\n SG_ADD_LEADER_SURVEY_PARTICIPANT,\n SG_DELETE_LEADER_SURVEY_PARTICIPANT,\n} from \"constants/actions\";\n\n \nimport {TeamEmployeeSelection} from \"./Settings\"\n\nimport {\n TopBar,\n Title2,\n Title4,\n P,\n LeaderAvatar,\n LeaderName,\n Line,\n Participants,\n OtherContainer\n} from \"./styled_list\";\n\n\nimport PersonImage from \"assets/images/person_image.png\";\n\n function ModalLeaderTeams(props) {\n const dispatch = useDispatch();\n const [selected, setSelected] = useState(0);\n const [selectedEmployee, setSelectedEmployee] = useState(0);\n const [teamList, setTeamList] = useState([]);\n const [nonTeamList, setNonTeamList] = useState([]);\n\n const [nonParticipantList, setNonParticipantList] = useState([]);\n \n const { employee, leaderParticipants } = props;\n\n const { get_employees, } = useSelector(\n (state) => ({\n get_employees: state.employees.employees,\n \n }),\n shallowEqual\n );\n\n \n useEffect(() => {\n if (props?.team) {\n setTeamList(get_employees.filter((fl) => fl.team === props.team));\n // not sure why this is not working\n // get_employees.filter(function (o1) {\n // // filter out (!) items in result2\n // return !leaderParticipants.some(function (o2) {\n // return o1.id === o2.employee;\n // });\n // })\n \n const _TeamList =[]\n get_employees.filter((fl) => fl.team === props.team).map(\n em => _TeamList.push(em.id)\n );\n\n const _ParticipantList =[]\n if (leaderParticipants.length > 0) {\n leaderParticipants.map(p =>\n _ParticipantList.push(p.employee)\n )\n }\n \n\n // list of team members who are not part \n // of the team the leader is in for display\n const _ParticipantNonTeamList =[]\n \n get_employees.filter((o1) => _ParticipantList.includes(o1.id))\n .filter((o1) => !_TeamList.includes(o1.id)).map(\n p => _ParticipantNonTeamList.push(p)\n )\n setNonTeamList(_ParticipantNonTeamList);\n\n // list of employees who are not selected\n // for drop down list\n // console.log(_ParticipantList)\n const _NonParticipantList =[]\n get_employees.filter((o1) => !_ParticipantList.includes(o1.id))\n .filter((o1) => !_TeamList.includes(o1.id)).map(\n p => _NonParticipantList.push(p)\n )\n \n setNonParticipantList(_NonParticipantList);\n } else {\n setTeamList([])\n setNonTeamList([])\n setNonParticipantList([])\n }\n \n }, [get_employees, props, leaderParticipants]);\n \n // console.log(leaderParticipants)\n // console.log(get_employees)\n // console.log(nonParticipantList)\n\n \n const [addLeader, setAddLeader] = React.useState(false);\n const [removeLeader, setRemoveLeader] = React.useState(false);\n \n function AddRemoveEmployee(id, employeeId) {\n if (id) {\n dispatch({\n type: SG_DELETE_LEADER_SURVEY_PARTICIPANT,\n payload: {\n id: id,\n },\n });\n setRemoveLeader(true);\n setAddLeader(false);\n } else {\n dispatch({\n type: SG_ADD_LEADER_SURVEY_PARTICIPANT,\n payload: {\n leaders_in_global_schedule: props.selectedLeader.id,\n employee: employeeId,\n organization: props.organizationId,\n },\n });\n setAddLeader(true);\n setRemoveLeader(false);\n }\n }\n\n function SelectedEmployee(e) {\n setSelectedEmployee(e)\n }\n \n return (\n \n 360 survey participants \n {addLeader ? (\n \n {teamList.map((p, k) => {\n return (\n lp.employee === p.id)[0]}\n schedule_id={props?.schedule_id}\n organizationId={props?.organizationId}\n key={k}\n />\n );\n })}\n \n \n \n `${option.first_name? option.first_name: ''} \n ${option.last_name? option.last_name: ''} \n ${option.email}`}\n getOptionValue={(option) => `${option.id}`}\n defaultValue={selectedEmployee}\n onChange={(e) => SelectedEmployee(e)}\n />\n \n \n \n {nonTeamList.map((p, k) => {\n return (\n lp.employee === p.id)[0]}\n schedule_id={props?.schedule_id}\n organizationId={props?.organizationId}\n key={k}\n />\n );\n })}\n \n
\n \n \n \n );\n }\n \n\n export default ModalLeaderTeams","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { Icon } from \"semantic-ui-react\";\nimport {\n P,\n P2,\n P3,\n Card,\n Avatar,\n Name,\n IconContainer,\n Highlight,\n ToggleContainer,\n Circle,\n Oval,\n SelectContainer,\n LeaderAvatarIcon,\n Toggled,\n Email,\n InviteContainer,\n MobileInvite,\n EmployeeSelect,\n} from \"./styled_list\";\n\nimport {\n SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY,\n SG_GET_GLOBAL_SCHEDULES,\n} from \"constants/actions\";\n\nimport ModalLeaderTeams from \"./ModalLeaderTeams\";\n\nimport PersonImage from \"assets/images/person_image.png\";\n\nexport const Selector = (props) => {\n return (\n Other Team Participants
\n\n\n
\n \n \n {prop.first_name} {prop.last_name}\n \n {prop.email} \n {prop.designation} \n
\n \n );\n};\n\nexport const choice = [\n { id: 1, value: 1, text: \"Weekly\" },\n { id: 2, value: 2, text: \"Bi-Weekly\" },\n { id: 3, value: 4, text: \"Monthly\" },\n { id: 4, value: 12, text: \"Quarterly\" },\n];\n\nexport const time = [\n { value: 8, text: \"8:00am\" },\n { value: 9, text: \"9:00am\" },\n { value: 10, text: \"10:00am\" },\n { value: 11, text: \"11:00am\" },\n { value: 12, text: \"12:00pm\" },\n { value: 13, text: \"01:00pm\" },\n { value: 14, text: \"02:00pm\" },\n { value: 15, text: \"03:00pm\" },\n { value: 16, text: \"04:00pm\" },\n { value: 17, text: \"05:00pm\" },\n];\n\nexport const SelectFreq = ({ selected, setProcessing }) => {\n const dispatch = useDispatch();\n const [selectedFreq, setSelectedFreq] = React.useState(1);\n\n React.useEffect(() => {\n if (selected?.frequency) {\n setSelectedFreq(\n choice.filter((fl) => fl.value === selected.frequency)[0].id\n );\n }\n }, [selected]);\n\n function MoveUp() {\n // () => UpdateActiveStatus(selectedFreq + 1)\n let newFreq = selectedFreq + 1 > 4 ? 4 : selectedFreq + 1;\n setSelectedFreq(newFreq);\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n function MoveDown() {\n let newFreq = selectedFreq - 1 < 1 ? 1 : selectedFreq - 1;\n setSelectedFreq(newFreq);\n\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n\n function UpdateActiveStatus(frequency) {\n if (selected?.id) {\n setProcessing(true);\n dispatch({\n type: SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY,\n payload: {\n id: selected.id,\n frequency: frequency,\n },\n });\n }\n }\n\n return (\n \n \n \n \n props.AddRemoveLeader(selectedLeader.id, employee.id)\n }\n />\n \n
\n ) : (\n \n {emp.first_name} {emp.last_name} {emp?.id}\n
\n\n setOption1(!option1)} />\n \n Answers to reports will come in 48 hours after the report has been\n sent out to promote and protect anonymity among your team.\n \n
\n \n setOption2(!option2)} />\n \n Answers to reports will come in after 100% of your team has\n responded .\n \n
\n Recently Changed
\nColumn 3: Put any relevant content here
\n\n \n {({ getRootProps, getInputProps }) => (\n 0}\n >\n {uploadedFiles?.name ? (\n setUploadedFiles([])}\n >\n {\" \"}\n {uploadedFiles?.name}{\" \"}\n
\n\n Drag & Drop your File here
\n\n\n {\" \"}\n
\n {uploadedFiles?.name && (\n onClickSave()}\n color=\"grey\"\n >\n Upload File\n \n )}\n
\n \n \n );\n};\n\nexport default FileUpload;\n\nconst P = styled.p`\n font-size: 16px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst StyledButton = styled.button`\n color: white;\n font-size: 14px;\n font-family: \"Barlow Semi Condensed\", sans-serif;\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 5px;\n background-color: #2d50e2;\n border: none;\n outline: none;\n padding: 0px 30px;\n border: 1px solid white;\n margin-right: 5px;\n\n @media (max-width: 768px) {\n height: 30px;\n font-size: 12px;\n padding: 0 10px 0 10px;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0);\n border: 1px solid #2d50e2;\n color: #2d50e2;\n }\n`;\n\nconst Info = styled.div`\n font-size: 14px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst Box = styled.div`\n border-radius: 10px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n padding: 20px;\n width: 100%;\n position: relative;\n margin-bottom: 30px;\n cursor: ${(props) => (props.file ? \"default\" : \"pointer\")};\n // cursor:pointer;\n // @media (max-width:768px){\n // width:250px;\n // }\n`;\nconst InnerBox = styled.div`\n border-radius: 5px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n margin: 10px;\n padding: 15px;\n cursor: pointer;\n background-color: #dcdcdc;\n`;\n\nconst Rotate = styled.div`\n position: absolute;\n bottom: 5px;\n right: -30px;\n width: 100px;\n cursor: pointer;\n color: #6a00ff;\n`;\nconst SubTitle = styled.div`\n font-size: 16px;\n font-weight: 500;\n text-align: left;\n cursor: pointer;\n color: #6a00ff;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Message, Icon, Confirm } from \"semantic-ui-react\";\n\nimport {\n Button,\n Pagination,\n Dimmer,\n Image,\n Loader,\n Segment,\n} from \"semantic-ui-react\";\n\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport { saveAs } from \"file-saver\";\n\nimport {\n SG_GET_FILE_UPLOADS,\n SG_DELETE_FILE_UPLOAD,\n} from \"constants/actions\";\n\nimport format from \"date-fns/format\";\n\n\nconst UploadedList = ({\n organizationId,\n setShowReportId,\n fetchAgain,\n setFetchAgain,\n selectedTeam,\n showErrors,\n deletedRecord,\n setDeletedRecord,\n setShowPage,\n AllPageOptions,\n}) => {\n const dispatch = useDispatch();\n // const [organizations, setOrganizations] = useState([]);\n\n const [pageLoading, setPageLoading] = useState(false);\n const [fileUploads, setFileUploads] = useState([]);\n const [confirmDelete, setConfirmDelete] = useState(false);\n const [deleteId, setDeleteId] = useState(false);\n\n const { get_file_uploads } = useSelector(\n (state) => ({\n get_file_uploads: state.fileupload,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n // console.log(\"updated data\", get_file_uploads.results)\n setFileUploads(get_file_uploads?.file_uploads);\n\n //\n }, [get_file_uploads]);\n\n // console.log(get_debrief_schedules.activePage)\n // console.log(activePage)\n\n useEffect(() => {\n let teamquery = \"\";\n if (selectedTeam?.id) {\n teamquery = `&team=${selectedTeam.id}`;\n }\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=1&organization=${organizationId}${teamquery}`,\n });\n }\n }, [dispatch, organizationId, selectedTeam]);\n\n // console.log(organizationId, fetchAgain)\n\n // useEffect(() => {\n // setPageLoading(true)\n // const timer1 = setTimeout(() => {\n // setPageLoading(false)\n // }, 2000)\n // return () => clearTimeout(timer1)\n // }, [activePage]);\n\n useEffect(() => {\n if (fetchAgain || deletedRecord) {\n setPageLoading(true);\n } else {\n const timer1 = setTimeout(() => {\n // if (organizationId) {\n // dispatch({\n // type: SG_GET_DEBRIEF_SCHEDULES,\n // payload: `page=${activePage}&organization=${organizationId}`\n\n // });\n // }\n setPageLoading(false);\n }, 2000);\n // const timer2 = setTimeout(() => {\n // setSecondOpen(true)\n // }, 20);\n return () => clearTimeout(timer1);\n // clearTimeout(timer2)\n }\n }, [fetchAgain, deletedRecord]);\n\n // console.log(selectedTeam)\n useEffect(() => {\n setPageLoading(true);\n const timer1 = setTimeout(() => {\n if (fetchAgain) {\n setFetchAgain(false);\n }\n if (deletedRecord) {\n setDeletedRecord(false);\n }\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=1&organization=${organizationId}`,\n });\n setPageLoading(false);\n }, 2000);\n return () => clearTimeout(timer1);\n }, [\n dispatch,\n fetchAgain,\n setFetchAgain,\n deletedRecord,\n setDeletedRecord,\n organizationId,\n ]);\n\n function ViewRecord(id) {\n setShowPage(AllPageOptions[1]);\n setShowReportId(id);\n }\n\n function clearErrors() {\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=1&organization=${organizationId}`,\n });\n }\n setFetchAgain(false);\n setDeletedRecord(false);\n }\n\n function DeleteFileUpload() {\n if (deleteId) {\n dispatch({\n type: SG_DELETE_FILE_UPLOAD,\n payload: { id: deleteId },\n });\n }\n setDeletedRecord(deleteId);\n setConfirmDelete(false);\n setShowReportId(false);\n setDeleteId(false);\n }\n\n function SelectDeleteRow(id) {\n // console.log(id)\n setDeleteId(id);\n setConfirmDelete(true);\n }\n\n // console.log(deleteId)\n\n return (\n <>\n {!showErrors && fetchAgain > 0 && (\n | Name | \nFile | \nStatus | \n\n |
|---|---|---|---|
| \n {brief?.name}\n | \n \n\n | \n {brief?.status_text} | \n\n <>\n | \n
{userMessage}
\n{nextSteps}
\n\n {submitError.map((se) => (\n
\n {fileUpload?.created_at && (\n \n {fileUpload?.status_text} -{\" \"}\n {format(\n new Date(\n fileUpload?.created_at?.toLocaleString()\n ),\n \"EEEE, MMM do\"\n )}\n \n )}\n \n {invalidRows > 0 &&\n `Invalid Data Found please fix them to complete the upload`}\n \n
\n {fileUploadStatus < 3 && (\n No Relevant Upload File Selected
\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{showPage?.id === 1 && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\n \n {({ getRootProps, getInputProps }) => (\n 0}\n >\n {uploadedFiles?.name ? (\n setUploadedFiles([])}\n >\n {\" \"}\n {uploadedFiles?.name}{\" \"}\n
\n\n Drag & Drop your File here
\n\n\n {\" \"}\n
\n {uploadedFiles?.name && (\n onClickSave()}\n color=\"grey\"\n >\n Upload File\n \n )}\n
\n \n \n );\n};\n\nexport default FileUpload;\n\nconst P = styled.p`\n font-size: 16px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst StyledButton = styled.button`\n color: white;\n font-size: 14px;\n font-family: \"Barlow Semi Condensed\", sans-serif;\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 5px;\n background-color: #2d50e2;\n border: none;\n outline: none;\n padding: 0px 30px;\n border: 1px solid white;\n margin-right: 5px;\n\n @media (max-width: 768px) {\n height: 30px;\n font-size: 12px;\n padding: 0 10px 0 10px;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0);\n border: 1px solid #2d50e2;\n color: #2d50e2;\n }\n`;\n\nconst Info = styled.div`\n font-size: 14px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst Box = styled.div`\n border-radius: 10px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n padding: 20px;\n width: 100%;\n position: relative;\n margin-bottom: 30px;\n cursor: ${(props) => (props.file ? \"default\" : \"pointer\")};\n // cursor:pointer;\n // @media (max-width:768px){\n // width:250px;\n // }\n`;\nconst InnerBox = styled.div`\n border-radius: 5px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n margin: 10px;\n padding: 15px;\n cursor: pointer;\n background-color: #dcdcdc;\n`;\n\nconst Rotate = styled.div`\n position: absolute;\n bottom: 5px;\n right: -30px;\n width: 100px;\n cursor: pointer;\n color: #6a00ff;\n`;\nconst SubTitle = styled.div`\n font-size: 16px;\n font-weight: 500;\n text-align: left;\n cursor: pointer;\n color: #6a00ff;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Message, Icon, Confirm } from \"semantic-ui-react\";\n\nimport {\n Button,\n Pagination,\n Dimmer,\n Image,\n Loader,\n Segment,\n} from \"semantic-ui-react\";\n\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport { saveAs } from \"file-saver\";\n\nimport {\n SG_GET_FILE_UPLOADS,\n SG_DELETE_FILE_UPLOAD,\n} from \"constants/actions\";\n\n\nconst UploadedList = ({\n organizationId,\n setShowReportId,\n fetchAgain,\n setFetchAgain,\n selectedTeam,\n showErrors,\n deletedRecord,\n setDeletedRecord,\n setShowPage,\n AllPageOptions,\n}) => {\n const dispatch = useDispatch();\n // const [organizations, setOrganizations] = useState([]);\n\n const [pageLoading, setPageLoading] = useState(false);\n const [fileUploads, setFileUploads] = useState([]);\n const [confirmDelete, setConfirmDelete] = useState(false);\n const [deleteId, setDeleteId] = useState(false);\n\n const { get_file_uploads } = useSelector(\n (state) => ({\n get_file_uploads: state.fileupload,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n // console.log(\"updated data\", get_file_uploads.results)\n setFileUploads(get_file_uploads?.file_uploads);\n\n //\n }, [get_file_uploads]);\n\n // console.log(get_debrief_schedules.activePage)\n // console.log(activePage)\n\n useEffect(() => {\n let teamquery = \"\";\n if (selectedTeam?.id) {\n teamquery = `&team=${selectedTeam.id}`;\n }\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=3&organization=${organizationId}${teamquery}`,\n });\n }\n }, [dispatch, organizationId, selectedTeam]);\n\n\n // console.log(organizationId, fetchAgain)\n\n // useEffect(() => {\n // setPageLoading(true)\n // const timer1 = setTimeout(() => {\n // setPageLoading(false)\n // }, 2000)\n // return () => clearTimeout(timer1)\n // }, [activePage]);\n\n useEffect(() => {\n if (fetchAgain || deletedRecord) {\n setPageLoading(true);\n } else {\n const timer1 = setTimeout(() => {\n // if (organizationId) {\n // dispatch({\n // type: SG_GET_DEBRIEF_SCHEDULES,\n // payload: `page=${activePage}&organization=${organizationId}`\n\n // });\n // }\n setPageLoading(false);\n }, 2000);\n // const timer2 = setTimeout(() => {\n // setSecondOpen(true)\n // }, 20);\n return () => clearTimeout(timer1);\n // clearTimeout(timer2)\n }\n }, [fetchAgain, deletedRecord]);\n\n // console.log(selectedTeam)\n useEffect(() => {\n setPageLoading(true);\n const timer1 = setTimeout(() => {\n if (fetchAgain) {\n setFetchAgain(false);\n }\n if (deletedRecord) {\n setDeletedRecord(false);\n }\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=3&organization=${organizationId}`,\n });\n setPageLoading(false);\n }, 2000);\n return () => clearTimeout(timer1);\n }, [\n dispatch,\n fetchAgain,\n setFetchAgain,\n deletedRecord,\n setDeletedRecord,\n organizationId,\n ]);\n\n function ViewRecord(id) {\n setShowPage(AllPageOptions[1]);\n setShowReportId(id);\n }\n\n function clearErrors() {\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `file_type=3&organization=${organizationId}`,\n });\n }\n setFetchAgain(false);\n setDeletedRecord(false);\n }\n\n function DeleteFileUpload() {\n if (deleteId) {\n dispatch({\n type: SG_DELETE_FILE_UPLOAD,\n payload: { id: deleteId },\n });\n }\n setDeletedRecord(deleteId);\n setConfirmDelete(false);\n setShowReportId(false);\n setDeleteId(false);\n }\n\n function SelectDeleteRow(id) {\n // console.log(id)\n setDeleteId(id);\n setConfirmDelete(true);\n }\n\n // console.log(deleteId)\n\n return (\n <>\n {!showErrors && fetchAgain > 0 && (\n | Name | \nFile | \nStatus | \n\n |
|---|---|---|---|
| \n {brief?.name}\n | \n\n | \n {brief?.status_text} | \n\n <>\n | \n
\n {fileUpload?.created_at && (\n \n {fileUpload?.status_text} -{\" \"}\n {format(\n new Date(fileUpload?.created_at?.toLocaleString()),\n \"EEEE, MMM do\"\n )}\n \n )}\n \n {invalidRows > 0 &&\n `Invalid Data or Empty Cells Found please fix them to complete the upload`}\n \n
\n {fileUpload?.status < 3 && (\n Not a Relevant Upload File Selected
\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{showPage?.id === 1 && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\tLoading page
\n\n \n \n {PlusIcon()} \n Invite Member \n \n \n \n \n Archived \n \n \n
\n \n \n \n {UploadGroupIcon()} \n Upload \n \n \n \n \n {RefreshIcon()} \n Update \n \n \n
\n Loading page
\n\n \n {rval?.name} \n \n \n \n Date \n Value \n \n {employeeRecord &&\n employeeRecord\n .filter((rv) => {\n return rv.employee_record_value_id === rval?.id;\n })\n .map((rec, ii) => {\n return (\n \n \n {format(\n new Date(\n rec?.created_at?.toLocaleString()\n ),\n \"EEEE, MMM do yyyy h:mm a\"\n )}\n \n {rec?.value} \n \n );\n })}\n \n\n {/* */}\n
\n );\n })) || (\n Loading page
\n\n\t
\n\t \n\t\t What you need to know about the roles for this team type \n\t\t Roles help you define what access a member should have when you invite them to innerlogic in this particular team. This team type will have a default role, which all members invited to this team will be given by default. \n\t\t Changing team types and roles \n\t\t At any time, you can change a team's type. Simple go to that team under team management and select edit in the top right corner menu. Each team member in that team will be automatically converted to the new team type roles, including team leaders. \n\t\t You can also change any individual team member roles by select manage and edit in the team member management tab, or in the employee manegement tab. \n\t\t \n\t\t
\n\t\t \n \n
\n\n\n \n {data.name} \n {members ? getLeader() : \"\"} \n \n {members\n ? members.filter((mm) => mm.team === data.id).length\n : 0}{\" \"}\n members\n \n
\n | Name | \n# of members | \nTeam type | \n
|---|
\n \n \n
\n );\n}\n\nexport default MemberPages;\n","import React from 'react';\nimport { List, Button } from 'semantic-ui-react';\nimport styled, { keyframes } from 'styled-components';\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport { Icon } from 'semantic-ui-react'\n\nconst ImageList = [\n 'long arrow alternate left',\n 'long arrow alternate right',\n 'arrows alternate horizontal',\n 'arrows alternate horizontal']\n\nconst colors = [\n '#612A8A',\n '#00B0F0',\n '#F12DA2',\n '#08C251'\n];\n\nconst icons = ['retweet', 'arrow right', 'angle double right', 'random']\n\nconst points = [['Only team leaders get access to the report data', 'Only team members participate in surveys', 'Team members login to create profiles only'],\n['All team members get access to the report data', 'All team members participate in surveys', 'Team members login to access report data']]\n\nconst TeamType = ({ teamType, setTeamType, setLearn }) => {\n\n const { get_team_types } = useSelector(\n (state) => ({\n get_team_types: state.team_types.team_types.filter(\n p => p.sort_order < 100\n ),\n }),\n shallowEqual\n );\n\n function SelectTeam(e) {\n setTeamType(e)\n }\n\n return (\n \n\t
\n\t \n\t\t What you need to know about the roles for this team type \n\t\t Roles help you define what access a member should have when you invite them to innerlogic in this particular team. This team type will have a default role, which all members invited to this team will be given by default. \n\t\t Changing team types and roles \n\t\t At any time, you can change a team's type. Simple go to that team under team management and select edit in the top right corner menu. Each team member in that team will be automatically converted to the new team type roles, including team leaders. \n\t\t You can also change any individual team member roles by select manage and edit in the team member management tab, or in the employee manegement tab. \n\t\t \n\t\t
\n\t\t \n * (Please select a team type) setLearn(val)}/>\n\n {teamType?\n <>\n Team name {errorsFound && !teamName ? '**':\"\"} \n \n \n \n \n \n }\n\n \n )\n}\n\n\nexport default AddTeam\n\n","import React, { useEffect, useState } from \"react\";\nimport {\n TeamCard,\n Name,\n Avatar,\n TeamName,\n TeamLeader,\n Members,\n ColumnName,\n BlankAvatar,\n MembersMobile,\n} from \"settings/styled-list\";\n\nimport styled from 'styled-components';\n\nfunction stringToHslColor(str, s, l) {\n var hash = 0;\n for (var i = 0; i < str?.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n\n var h = hash % 360;\n return 'hsl('+h+', '+s+'%, '+l+'%)';\n}\n\nconst BlankColor = styled.div`\n background-color:${props=>props.color};\n color:white;\n height:35px;\n width:35px;\n border-radius:18px;\n display:flex;\n align-items:center;\n justify-content:center;\n font-size:20px;\n font-weight:bold;\n margin-left:20px;\n margin-right:10px;\n`\n\nconst Team = (props) => {\n const {data, members} = props;\n \n const getLeader = () => {\n let leader = members.filter(\n (member) => member.team === data.id && member.role == 2\n )[0];\n return leader\n ? leader.first_name\n ? leader.first_name + \" \" + leader.last_name\n : leader.email\n : \"\";\n };\n\n \n return (\n props.onClick()}>\n \n {data?.name?.[0]} \n \n\n \n {members ? members.filter((mm) => mm.team === data.id).length : 0}{\" \"}\n members\n {/* Edit */}\n \n\n \n {data.team_type_name} \n \n \n\n \n );\n};\n\nexport default Team;\n","import React, { useState, useEffect } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport TeamCard from \"./TeamCard\";\nimport { Message } from \"semantic-ui-react\";\nimport AddTeam from \"./addTeam\";\n\nconst TeamTable = (props) => {\n const {\n members,\n data,\n search,\n setSelectTeam,\n setOpenFullCard,\n openTeamCard,\n setOpenTeamCard,\n setFullEmpData,\n } = props;\n\n // console.log(data)\n return (\n \n {data && data?.length > 0 ? (\n \n
\n ) : search ? (\n \"\"\n ) : (\n \n Create a team}\n />{\" \"}\n unit within innerlogic as a core hub for your organization's teams\n to thrive.\n
\n }\n />\n )}\n \n );\n};\n\nexport default TeamTable;\n\nconst Table = styled.div`\n width: 100%;\n`;\nconst Headers = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n border-bottom: 1px solid #e9e9e9;\n`;\n\nconst TH = styled.div`\n font-size: 14px;\n font-family: \"Red Hat Display\", sans-serif;\n color: #4a4a4a;\n width: ${(props) => props.width + \"%\"};\n padding: 0 0 10px 15px;\n\n @media (max-width: 768px) {\n display: none;\n }\n`;\n\nconst Linked = styled.span`\n text-decoration: underline;\n cursor: pointer;\n`;\n","import React, { useState, useEffect } from \"react\";\nimport {\n Button,\n Message,\n Modal,\n Icon,\n Input,\n Checkbox,\n Segment,\n} from \"semantic-ui-react\";\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport styled from \"styled-components\";\n\nimport { useToasts } from \"react-toast-notifications\";\n\nimport Select from \"react-select\";\n\nimport {\n UPDATE_EMPLOYEE,\n REGISTER_EMPLOYEE,\n SG_VALIDATE_EMPLOYEE,\n} from \"constants/actions\";\n\nfunction validateEmail(email) {\n const re =\n /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(String(email).toLowerCase());\n}\n\n// function ShowEmployeeFound({ empFound, setEmployee, setError, setEmailId }) {\n// function OnSelect() {\n// setEmployee(empFound);\n// setError({ emailFound: true });\n// }\n\n// function OnClear() {\n// setEmployee(false);\n// setError({ emailFound: false });\n// setEmailId(\"\");\n// }\n// const [employeeDet, setEmployeeDet] = React.useState(false);\n// React.useEffect(() => {\n// if (empFound?.first_name) {\n// setEmployeeDet(`${empFound?.first_name} ${empFound?.last_name}\n// ${empFound?.email}`);\n// } else {\n// setEmployeeDet(empFound?.email);\n// }\n// }, [empFound]);\n\n// return (\n// \n \n
\n\n \n {data.name} \n {members ? getLeader() : \"\"} \n \n {members\n ? members.filter((mm) => mm.team === data.id).length\n : 0}{\" \"}\n members\n \n
\n | Name | \n# of members | \nTeam type | \n
|---|
\n Choose what account type this user will have\n in{\" \"}\n {selectedTeam\n ? selectedTeam?.name\n : \"this team \"}\n .{\" \"}\n
\n\n {employeeRole.map((p, i) => (\n\n\t\t\t\tManage \n\n\t\t\t\t
\n\t\t- \n\t\t\t\t\t
\n\t\tsetOpen(false)}\n onConfirm={()=>confirm()}\n content={'Are you sure you want to remove the '+props?.data?.name}\n />\n\t\tsetOpen(true)}>Remove Team
\n\t\t)\n}\n\nexport default RemoveTeam","import React from 'react';\nimport styled from 'styled-components';\nimport ClickAwayListener from 'react-click-away-listener';\n\n// import RemoveFromDepartment from './removeFromDepartment'\n// import AddToDepartment from './addToDepartment'\n\nimport RemoveTeam from './removeTeam'\n\nimport AddTeam from \"settings/member_directory/Teams/addTeam\";\n\nconst Oval = styled.div`\n\twidth: 34px;\n height: 34px;\n background-color: #ebebeb;\n border-radius:17px;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-direction:row;\n cursor:pointer;\n position:relative;\n`\nconst Dots = styled.div`\n\theight:4px;\n\twidth:4px;\n\tborder-radius:2px;\n\tbackground-color: #4a4a4a;\n\tmargin-right:1.5px;\n\tmargin-left:1.5px;\n`\n\nconst List = styled.div`\n\tbox-shadow: ${props=>props.visible? '0 2px 20px 0 rgba(194, 194, 194, 0.5)' :''};\n\tborder-radius:8px;\t\n\twidth:250px;\n\tpadding:5px;\n\tposition:absolute;\n\ttop:40px;\n\tright:0px;\n\theight:${props=>props.visible? 'auto' :'0'};\n\topacity:${props=>props.visible? 1 :0};\n\ttransition:height 500ms,opacity 500ms,box-shadow 500ms;\n\toverflow: hidden;\n\tbackground-color:white;\n\tz-index:3;\n`\n\nconst Red = styled.div`\n\tfont-size: 16px;\n font-weight: 500;\n color: #ff2d55;\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst BlueName = styled.div`\n\tfont-size: 16px;\n font-weight: 500;\n color: #6a00ff;\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst ListItem = styled.div`\n\tcolor:#4a4a4a;\n\tfont-size:16px;\n\tborder-bottom: ${props=>props.last? 'solid 1px #e9e9e9' : \"\" };\n\tpadding:8px 8px 5px 5px;\n\tcursor:pointer;\n\theight:25px;\n\tbox-sizing:content-box;\n\tfont-family: 'Red Hat Display', sans-serif;\n\tcolor: #545454;\n\t&:hover{\n\t\tbackground-color:#e9e9e9;\n\t}\n\n`\n\n\nconst Edit = (props) =>{\n\n\tconst [visible, setVisible] = React.useState(false)\n\tconst handleClickAway = () => {\n setVisible(false)\n }\n\n\treturn (\n\t\t\n\t\t\tsetVisible(!visible)}>\n\t\t\t\t \n\t\t
\n\t\t- \n\t\t\t\t\t
\n \n \n `${getName(option)} ${option.email} (${option.team_name})`}\n getOptionValue={(option) => option.id}\n />\n Submit\n \n \n
\n {/* Add New by inviting
\n \n
\n \n \n \n {errors.email && \n }\n
\n Email is required
\n{errors.email?.message}
\n\n \n \n
\n \n \n
\n \n );\n};\n\nexport default TeamAccessList;\n\nconst Headers = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n border-bottom: 1px solid #e9e9e9;\n`;\n\nconst Remove = styled.div`\n\tfont-size: 16px;\n font-weight: 500;\n color: #ff2d55;\n cursor:pointer;\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst TH = styled.div`\n font-size: 14px;\n font-family: \"Red Hat Display\", sans-serif;\n color: #4a4a4a;\n width: ${(props) => props.width + \"%\"};\n padding: 0 0 10px 15px;\n\n @media (max-width:768px){\n display:none;\n }\n`;\nconst Linked = styled.span`\n text-decoration: none;\n cursor: pointer;\n`;\n\nconst Card = styled.div`\n width:600px;\n max-width:100%;\n padding:30px;\n margin-bottom:10px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n position:relative;\n display:flex;\n justify-content:space-between;\n align-items:center;\n\n`\n\nconst Avatar = styled.img`\n height: 10px;\n width: 10px;\n border: solid 4px #ffffff;\n border-radius: 10px;\n transition: left 0.5s;\n margin-right: -10px;\n alt: ${(props) => props.alt};\n`;\n","import React, { useEffect } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\n\nimport { Icon, Message, Breadcrumb, Dimmer, Loader, Segment, Button } from \"semantic-ui-react\";\n// import { Link, useParams } from \"react-router-dom\";\n\n\nimport EditMember from \"settings/member_directory/Members/EditMember\";\nimport MemberCard from \"./memberCard\";\nimport Edit from \"./Edit\";\nimport TeamAccessList from \"settings/member_directory/TeamAccess/List\"\n\n\n\nimport \"settings/setting.css\";\n\n\nconst TeamSettings = (props) => {\n const { teamLeader, administrator, userEmployee,\n setOpenTeamCard, openTeamCard,\n employee, setFullEmpData,\n setLoading,\n BackFromTeam,\n } = props\n\n // const [addMember, setAddMember] = React.useState(false);\n // const [invitedMember, setInviteMember] = React.useState(false);\n // const [role, setRole] = React.useState(11);\n const [active, setActive] = React.useState(false)\n const [inverted, setInverted] = React.useState(false)\n\n const selectDept = (dept) => {\n BackFromTeam()\n props.selectDepartment(dept);\n };\n\n // const inviteLeader = () => {\n // setRole(5);\n // setAddMember(true);\n // };\n\n // const inviteMember = () => {\n // setRole(9);\n // setAddMember(false);\n // setInviteMember(true);\n // };\n\n // const addMembers = () => {\n // setRole(9);\n // setInviteMember(false);\n // setAddMember(true);\n // };\n\n React.useEffect(() => {\n // if the response is ok 200\n setActive(true)\n setInverted(true)\n setTimeout(\n () => {\n // console.log('Hello after 5 seconds');\n setActive(false)\n setInverted(false)\n },\n 2 * 1000\n );\n\n // \n }, [props.teamUpdate]);\n\n // console.log(props)\n\nreturn (\n Add Spectators\n \n setOpenInvite(!openInvite)} />\n \n
\n {openInvite &&\n | \n Member\n | \n\n Access\n | \n\n | \n
|---|
\n \n \n
\n \n setVisible(!visible)}>\n \n
\n - \n {/*
\n {data.slice(0,1).map((pl,i)=>{\n return {pl} \n })}\n \n
\n )\n }\n\n return (\n \n setVisible(!visible)}>\n \n
\n - \n {/* // step 3 */}\n {auditEnabled &&\n
| Name | \n{primarySecondaryName?.primary} | \nUpdated | \nActions | \nName | \nRole | \nTeam | \nActions | \n
|---|
\n \n Cancel
\n \n {auditEnabled ? (\n addUploadUsers && (\n \n + Invite member\n \n }\n noTeam\n setChangesMade={setChangesMade}\n userEmployee={userEmployee}\n inviteNew={true}\n />\n )\n ) : (\n \n + Invite member\n \n )}\n
\n {addUploadUsers && auditEnabled && (\n Loading page
\n\n Select one or multiple teams to use our personality analytics tool,\n where people learn not only about their own personality, but also\n how their personality interacts with others based on the most\n reliable personality metrics available.\n
\n\n\n {getTeam(data.team)?.name} \n {getLeader(data.team) ? getLeader() :\"No leader\"} \n\n
\n | Name | \nCompletion | \n\n |
|---|
| Name | \nStatus | \n\n |
|---|
\n Select one or multiple people to use innerlogic’s personality assessment.\n
\n\n\n Personality Management \n Add Team Personality} />\n ) : (\n Add Member Personality} />\n )}\n
\n\n \n Your hub to manage and utilize the personality analytics feature.\n Invite teams or members to take the assessment and upgrade their\n ability to collaborate.\n
\n\n\n {tab === 0 ? (\n\n {/* {image? : '' } */}\n {/*
\n \n );\n};\n\nexport default ImageUpload;\n","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport styled from \"styled-components\";\nimport {\n Form,\n Header,\n Modal,\n} from \"semantic-ui-react\";\nimport { Link } from \"react-router-dom\";\n\nimport Avatar from \"./Avatar\";\nimport { Dimmer, Loader, Icon, Table } from \"semantic-ui-react\";\n\nimport SelectOrgRow from \"account/SelectOrgRow\"\n\nimport Input from \"./Input\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { useForm, Controller } from \"react-hook-form\";\n\nimport {\n UPDATE_EMPLOYEE,\n SG_FETCH_USER_EMPLOYEE,\n SG_GET_EMPLOYEE_CATEGORIES,\n} from \"constants/actions\";\n\nimport \"react-datepicker/dist/react-datepicker.css\";\n\nimport ImageAvtar from \"./ImageAvtar\";\nimport { pathList } from \"routes/routeMap\"\n\nconst MemberSettings = () => {\n const dispatch = useDispatch();\n\n // const [authEmployeeId, setAuthEmployeeId] = useState(false);\n const [authEmployee, setAuthEmployee] = useState(false);\n const [organization, setOrganization] = useState(false);\n const [auditEnabled, setAuditEnabled] = useState(false);\n const [employeeCategory, setEmployeeCategory] = useState(false);\n const [primaryCategory, setPrimaryCategory] = useState(false);\n const [secondaryCategory, setSecondaryCategory] = useState(false);\n const [appList, setAppList] = useState([])\n\n const [dos, setDos] = useState(false);\n const { addToast } = useToasts();\n const {\n register,\n handleSubmit,\n control,\n setValue,\n errors,\n formState,\n } = useForm();\n const employee_id = useSelector((state) => state.auth.employee_id);\n const [loading, setLoading] = useState(false);\n\n // const [reLoad, setReload] = useState(false)\n const [loadingText, setLoadingText] = React.useState(\"Loading\");\n\n\n useEffect(() => {\n // if the response is ok 200\n if (employee_id) {\n dispatch({\n type: SG_FETCH_USER_EMPLOYEE,\n payload: { id: employee_id },\n });\n dispatch({ type: SG_GET_EMPLOYEE_CATEGORIES });\n }\n }, [employee_id, dispatch]);\n\n const { get_employee, get_auth, organization_id, get_organization,\n get_employee_categories } = useSelector(\n (state) => ({\n get_employee: state.employees,\n get_auth: state.auth,\n organization_id: state.auth.organization_id,\n get_organization: state.organizations,\n get_employee_categories: state.employee_category.employee_category,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n if (get_employee) {\n setAuthEmployee(get_employee.userEmp);\n setOrganization(get_organization?.[organization_id])\n setDos(Date.parse(get_employee[get_auth?.employee_id]?.join_date));\n // if (get_employee[get_auth?.employee_id]?.dob) {\n // setDatabaseDate(new Date(get_employee[get_auth?.employee_id]?.dob));\n // }\n }\n }, [get_employee, get_auth, organization_id, get_organization]);\n\n useEffect(() => {\n const _appsEnabled = []\n pathList?.map(rt => {\n const Found = organization?.services_enabled?.filter(\n srv => srv?.name === rt.name && srv?.enabled === true\n )?.[0]\n\n _appsEnabled.push({\n name: rt.name,\n enabled: Found ? true : false,\n description: rt.description\n })\n\n return null\n })\n setAppList(_appsEnabled)\n\n }, [organization]);\n\n // console.log(appList)\n\n useEffect(() => {\n const _Category = (get_employee_categories?.filter(\n ec => ec.employee === Number(get_auth?.employee_id))?.[0]?.category)\n setEmployeeCategory(_Category?.filter(ct => ct?.priority === 'primary').map(\n ct => ct.value\n ))\n setPrimaryCategory(_Category?.filter(ct => ct?.priority === 'primary'))\n setSecondaryCategory(_Category?.filter(ct => ct?.priority === 'secondary'))\n\n }, [get_employee_categories, get_auth]);\n\n // console.log(employeeCategory)\n // console.log(secondaryCategory)\n\n\n const onSubmit = (data) => {\n if (authEmployee) {\n // update employee\n dispatch({\n type: UPDATE_EMPLOYEE,\n payload: {\n ...data,\n id: authEmployee.id,\n },\n });\n\n // setIsDirty(false);\n setLoading(true);\n setLoadingText(\"Profile Updated\");\n addToast(\"Profile Updated\", { appearance: \"success\", autoDismiss: true });\n }\n\n };\n\n useEffect(() => {\n if (organization?.services_enabled) {\n setAuditEnabled(\n organization?.services_enabled.filter(\n (se) => se?.name.toLowerCase() === \"audit\"\n )?.[0]?.enabled\n );\n }\n }, [organization]);\n\n useEffect(() => {\n if (authEmployee) {\n setValue(\"first_name\", authEmployee?.first_name);\n setValue(\"last_name\", authEmployee?.last_name);\n // setValue(\"join_date\", Date.parse(employee?.join_date));\n }\n }, [authEmployee, setValue]);\n\n const [open, setOpen] = useState(false);\n const [nameOpen, setNameOpen] = useState(false);\n const [onClickSaveImg, setOnClickSaveImg] = useState(false);\n\n function FullName() {\n // console.log(selEmp?.first_name)\n if (authEmployee?.first_name) {\n return `${authEmployee.first_name} ${authEmployee.last_name}`\n }\n return authEmployee?.email?.split('@')[0]\n }\n\n\n return (\n Upload your profile picture
*/}\n\n\n \n {({ getRootProps, getInputProps }) => (\n
\n Click the image or Drag & Drop your picture here
\n\n\n {/* {console.log(getRootProps())} */}\n ImageEditing()}\n color={[230, 230, 230, 0.7]} // RGBA\n scale={scale}\n rotate={rotate}\n borderRadius={125}\n />\n\n {}\n
\n )}\n \n {image ? (\n \n {image &&\n {\n setImage(null)\n\n setEditing(false)\n }}>Change Picture }\n\n {newImage && <>\n \n Set Zoom \n setRotate(rotate + 90)}>\n Rotate\n \n \n }\n\n\n\n
\n ) : (\n \" \"\n )}\n \n onClickSave()} color=\"grey\">\n Save Picture\n \n
\n \n Change Password\n
\n Click anywhere to dismiss message
\n )}\n\n \n \n \n Upload Logo \n \n
\n Let's create your account!
\n {formErrors.organization?.error && !pristine && (\n\n
\n )}\n \n
\n )}\n\n \n \n Already registered? Sign in\n
\n {Domain.notRegisterText}
}\n\n
\n )}\n \n {message && (\n
\n\n {formErrors.length > 0 && !pristine && (\n \n Already registered? Sign in\n
\n \n \n {({ getRootProps, getInputProps }) => (\n 0}\n >\n {uploadedFiles?.name ? (\n setUploadedFiles([])}\n >\n {\" \"}\n {uploadedFiles?.name}{\" \"}\n
\n\n Drag & Drop your File here
\n\n\n {\" \"}\n
\n {uploadedFiles?.name && (\n onClickSave()}\n color=\"grey\"\n >\n Upload File\n \n )}\n
\n \n \n );\n};\n\nexport default FileUpload;\n\nconst P = styled.p`\n font-size: 16px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst StyledButton = styled.button`\n color: white;\n font-size: 14px;\n font-family: \"Barlow Semi Condensed\", sans-serif;\n display: flex;\n height: 40px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 5px;\n background-color: #2d50e2;\n border: none;\n outline: none;\n padding: 0px 30px;\n border: 1px solid white;\n margin-right: 5px;\n\n @media (max-width: 768px) {\n height: 30px;\n font-size: 12px;\n padding: 0 10px 0 10px;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0);\n border: 1px solid #2d50e2;\n color: #2d50e2;\n }\n`;\n\nconst Info = styled.div`\n font-size: 14px;\n font-family: \"Barlow\", sans-serif;\n`;\n\nconst Box = styled.div`\n border-radius: 10px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n padding: 20px;\n width: 100%;\n position: relative;\n margin-bottom: 30px;\n cursor: ${(props) => (props.file ? \"default\" : \"pointer\")};\n // cursor:pointer;\n // @media (max-width:768px){\n // width:250px;\n // }\n`;\nconst InnerBox = styled.div`\n border-radius: 5px;\n border: 1px solid #e9e9e9;\n display: flex;\n align-items: center;\n margin: 10px;\n padding: 15px;\n cursor: pointer;\n background-color: #dcdcdc;\n`;\n\nconst Rotate = styled.div`\n position: absolute;\n bottom: 5px;\n right: -30px;\n width: 100px;\n cursor: pointer;\n color: #6a00ff;\n`;\nconst SubTitle = styled.div`\n font-size: 16px;\n font-weight: 500;\n text-align: left;\n cursor: pointer;\n color: #6a00ff;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Message, Icon, Confirm } from \"semantic-ui-react\";\n\nimport {\n Button,\n Pagination,\n Dimmer,\n Image,\n Loader,\n Segment,\n} from \"semantic-ui-react\";\n\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport { saveAs } from \"file-saver\";\n\nimport {\n SG_GET_FILE_UPLOADS,\n SG_DELETE_FILE_UPLOAD,\n} from \"constants/actions\";\n\nimport format from \"date-fns/format\";\n\n\nconst UploadedList = ({\n organizationId,\n setShowReportId,\n fetchAgain,\n setFetchAgain,\n selectedTeam,\n showErrors,\n deletedRecord,\n setDeletedRecord,\n setShowPage,\n AllPageOptions,\n}) => {\n const dispatch = useDispatch();\n // const [organizations, setOrganizations] = useState([]);\n\n const [pageLoading, setPageLoading] = useState(false);\n const [fileUploads, setFileUploads] = useState([]);\n const [confirmDelete, setConfirmDelete] = useState(false);\n const [deleteId, setDeleteId] = useState(false);\n\n const { get_file_uploads } = useSelector(\n (state) => ({\n get_file_uploads: state.fileupload,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n // console.log(\"updated data\", get_file_uploads.results)\n setFileUploads(get_file_uploads?.file_uploads);\n\n //\n }, [get_file_uploads]);\n\n // console.log(get_debrief_schedules.activePage)\n // console.log(activePage)\n\n useEffect(() => {\n let teamquery = \"\";\n if (selectedTeam?.id) {\n teamquery = `&team=${selectedTeam.id}`;\n }\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `organization=${organizationId}${teamquery}`,\n });\n }\n }, [dispatch, organizationId, selectedTeam]);\n\n // console.log(organizationId, fetchAgain)\n\n // useEffect(() => {\n // setPageLoading(true)\n // const timer1 = setTimeout(() => {\n // setPageLoading(false)\n // }, 2000)\n // return () => clearTimeout(timer1)\n // }, [activePage]);\n\n useEffect(() => {\n if (fetchAgain || deletedRecord) {\n setPageLoading(true);\n } else {\n const timer1 = setTimeout(() => {\n // if (organizationId) {\n // dispatch({\n // type: SG_GET_DEBRIEF_SCHEDULES,\n // payload: `page=${activePage}&organization=${organizationId}`\n\n // });\n // }\n setPageLoading(false);\n }, 2000);\n // const timer2 = setTimeout(() => {\n // setSecondOpen(true)\n // }, 20);\n return () => clearTimeout(timer1);\n // clearTimeout(timer2)\n }\n }, [fetchAgain, deletedRecord]);\n\n // console.log(selectedTeam)\n useEffect(() => {\n setPageLoading(true);\n const timer1 = setTimeout(() => {\n if (fetchAgain) {\n setFetchAgain(false);\n }\n if (deletedRecord) {\n setDeletedRecord(false);\n }\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `organization=${organizationId}`,\n });\n setPageLoading(false);\n }, 2000);\n return () => clearTimeout(timer1);\n }, [\n dispatch,\n fetchAgain,\n setFetchAgain,\n deletedRecord,\n setDeletedRecord,\n organizationId,\n ]);\n\n function ViewRecord(id) {\n setShowPage(AllPageOptions[1]);\n setShowReportId(id);\n }\n\n function clearErrors() {\n if (organizationId) {\n dispatch({\n type: SG_GET_FILE_UPLOADS,\n payload: `organization=${organizationId}`,\n });\n }\n setFetchAgain(false);\n setDeletedRecord(false);\n }\n\n function DeleteFileUpload() {\n if (deleteId) {\n dispatch({\n type: SG_DELETE_FILE_UPLOAD,\n payload: { id: deleteId },\n });\n }\n setDeletedRecord(deleteId);\n setConfirmDelete(false);\n setShowReportId(false);\n setDeleteId(false);\n }\n\n function SelectDeleteRow(id) {\n // console.log(id)\n setDeleteId(id);\n setConfirmDelete(true);\n }\n\n // console.log(deleteId)\n\n return (\n <>\n {!showErrors && fetchAgain > 0 && (\n | Name | \nUploaded | \nFile | \nStatus | \n\n |
|---|---|---|---|---|
| \n {brief?.name}\n {brief?.id}\n | \n\n {format(\n new Date(brief?.created_at?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n \n {brief?.time_zone}\n | \n \n | \n {brief?.status_text} | \n\n <>\n | \n
\n {fileUpload?.created_at && (\n \n {fileUpload?.status_text} -{\" \"}\n {format(\n new Date(\n fileUpload?.created_at?.toLocaleString()\n ),\n \"EEEE, MMM do\"\n )}\n \n )}\n \n {invalidRows > 0 &&\n `Invalid Data or Empty Cells Found please fix them to complete the upload`}\n \n
\n {fileUpload?.status < 3 && (\n Not a Relevant Upload File Selected
\n )\n ) : (\n \"\"\n )}\n\n {showPage?.id === 1 && (\n <>\n\n The Innerlogic Enterprise Plan \n Culture Mastery. Expert Delivery. \n
\n Promo Code Message once the right promo code has been entered
\n\t\t\t\t\n\t\t\t\t}\n\n\t\t\t\t\n {(p.stripe_id === selectedPlan?.id) ?\n setOpen(true)}\n color=\"red\"\n style={{ cursor: \"pointer\" }}\n size=\"large\"\n /> : ''}\n
\n This would remove all your data and close your access to app
\nTo confirm click Ok Below
\n\n\n Company Address \n setOpen(true)}\n />\n
\n \n \n Edit Company Address\n \n
\n\n For your location, you'll be billed in US dollars.
\n- \r\n {paymentData?.map((p, i) => {\r\n return (\r\n\r\n
\r\n {p.card_type === \"debit\" ? 'Debit' : 'Credit'} Card **** **** **** {p.last_4_digits}\r\n
\r\n \r\n {p.exp_month} /\r\n {p.exp_year}\r\n
\r\n \r\n setSelectedPaymentMethod(p)}>\r\n Select\r\n \r\n
\r\n {JSON.stringify(invoiceInfo)}
\n } else {\n returnNothing Found
\n }\n\n}\n\nexport default function Payment() {\n const dispatch = useDispatch();\n const organization_id = useSelector((state) => Number(state.auth.organization_id));\n const employeeId = useSelector((state) => Number(state.auth.employee_id));\n const [organization, setOrganization] = React.useState(\"\");\n const [employee, setEmployee] = React.useState(\"\");\n const [prices, setPrices] = React.useState([]);\n const [priceId, setPriceId] = React.useState(false);\n const [subscription, setSubscription] = React.useState(false);\n const [subscriptionSelected, setSubscriptionSelected] = React.useState(false)\n const [stripeTaxRates, setStripeTaxRates] = React.useState([]);\n const [showNextInvoice, setShowNextInvoice] = React.useState(false)\n\n const [selectedPaymentMethod, setSelectedPaymentMethod] = React.useState(false)\n\n React.useEffect(() => {\n // if the response is ok 200\n if (organization_id) {\n dispatch({\n type: PULL_ORGANIZATION,\n payload: { id: organization_id },\n });\n }\n }, [organization_id, dispatch, showNextInvoice]);\n\n React.useEffect(() => {\n dispatch({\n type: SG_GET_PRICES,\n });\n\n dispatch({\n type: SG_GET_STRIPE_TAX_RATES\n })\n // /\n dispatch({\n type: SG_GET_PAYMENT_METHODS,\n });\n\n dispatch({\n type: SG_GET_SUBSCRIPTIONS,\n });\n }, [dispatch]);\n\n const {\n get_organization,\n get_employees,\n get_prices,\n get_next_invoice,\n get_payment_methods,\n get_stripe_payment_methods,\n get_stripe_tax_rates,\n get_auth, get_subscription\n } = useSelector(\n (state) => ({\n get_organization: state.organizations,\n get_employees: state.employees,\n get_subscription: state.subscription,\n get_next_invoice: state.subscription.invoice.response,\n get_stripe_tax_rates: state.subscription.taxRates,\n get_payment_methods: state.payments.payment_methods,\n get_stripe_payment_methods: state.subscription.payment_methods.response,\n get_prices: state.price,\n get_auth: state.auth,\n }),\n shallowEqual\n );\n\n React.useEffect(() => {\n if (get_employees) {\n setEmployee(get_employees[employeeId])\n }\n }, [get_employees, employeeId]);\n\n React.useEffect(() => {\n if (get_prices?.price) {\n setPrices(get_prices.price);\n }\n }, [get_prices]);\n\n React.useEffect(() => {\n if (get_subscription?.subscriptions) {\n setSubscription(get_subscription?.subscriptions[0]);\n if (get_subscription?.subscriptions[0]?.payment_method)\n {\n setSelectedPaymentMethod(get_payment_methods.find(({id}) => id === get_subscription?.subscriptions[0]?.payment_method))\n }\n if (get_subscription?.subscriptions[0]?.price)\n {\n setSubscriptionSelected(get_prices?.price.find(({id}) => id === get_subscription?.subscriptions[0]?.price))\n }\n \n // setSubscriptionSelected(get_subscription.subscriptions[0]?.items?.plan)\n }\n }, [get_subscription, get_payment_methods, get_prices]);\n\n React.useEffect(() => {\n if (get_organization) {\n setOrganization(get_organization[organization_id]);\n }\n }, [get_organization, organization_id]);\n\n React.useEffect(() => {\n if (get_stripe_tax_rates) {\n setStripeTaxRates(get_stripe_tax_rates);\n }\n }, [get_stripe_tax_rates]);\n\n\n // // console.log(get_organization[organization_id]);\n // // console.log(organization_id)\n // console.log(employee)\n // console.log(new Date(subscription[0]?.current_period_end))\n // {format(\n // new Date(subscription[0].current_period_end.toLocaleString()),\n // \"EEEE, MMM do h:mm a\"\n // )}\n useEffect(() => {\n if (showNextInvoice) {\n dispatch({\n type: SG_NEXT_INVOICE,\n });\n }\n }, [dispatch, showNextInvoice])\n\n function FetchStripePayment(payment_method) {\n dispatch({\n type: SG_GET_STRIPE_PAYMENT_METHODS,\n payload: { employee: employeeId }\n // payload: { payment_method: payment_method }\n });\n }\n\n function DeletePaymentMethod(id) {\n // console.log(id)\n dispatch({\n type: SG_DELETE_PAYMENT_METHOD,\n payload: { id: id }\n });\n }\n\n function CreateSubscription(data) {\n\t\tconsole.log(data)\n\t\tdispatch({\n\t\t type: SG_ADD_SUBSCRIPTION,\n\t\t payload: { ...data }\n\t\t});\n\t}\n\n function UpdateSubscription(data) {\n\t\tconsole.log(data)\n\t\tdispatch({\n\t\t type: SG_UPDATE_SUBSCRIPTION,\n\t\t payload: { ...data }\n\t\t});\n\t}\n\n function CancelSubscription(id) {\n // console.log(id)\n dispatch({\n type: SG_CANCEL_SUBSCRIPTION,\n payload: { id: id }\n });\n }\n\n // console.log(get_prices)\n console.log(subscription);\n return (\n\n Current Period Start Date: {(subscription?.current_period_start)}\n
\n\n\n {/* {format(\n new Date(subscription[0]?.current_period_end.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )} */}\nNext Renewal Date: {(subscription?.current_period_end)}\n
\n\n Licenses Billed: {(subscription?.quantity)} / current users: {organization?.no_of_licenses}\n
\n\n Status: {(subscription?.status)}\n
\n\n Cancel at End of Period: {subscription?.cancel_at_period_end ? \"Yes\" : \"No\"}\n\n
\n\n\n FetchStripePayment(!showNextInvoice)}\n />\n {/* setShowNextInvoice(!showNextInvoice)}\n /> */}\n\n setShowNextInvoice(!showNextInvoice)}\n open={showNextInvoice}>\n \n Your Next Invoice \n
\n \n Email validation \n\n {validationToken ? (\n {validate_email.message} \n )}\n {!token &&\n No Token found }\n\n {get_error?.data?.token && \"Invalid Token\"} \n\n {validationToken && (\n <>\n \n \n \n \n )}\n
\n \n );\n};\n\nexport default Register;\n\nconst Title = styled.div`\n font-size: 28px;\n font-weight: 900;\n margin-bottom: 40px;\n font-family: \"Red Hat Display\", sans-serif;\n`;\nconst Button = styled.button`\n width: 200px;\n height: 55px;\n border-radius: 8px;\n background-color: #6a00ff;\n color: white;\n font-size: 18px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n outline: none;\n margin-top: 20px;\n`;\nconst IMG = styled.img`\n width: 150px;\n`;\nconst Banner = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 50px;\n font-family: \"Red Hat Display\", sans-serif;\n margin-bottom: 50px;\n margin-top: 100px;\n`;\n\nconst P = styled.div`\n font-family: \"Red Hat Display\", sans-serif;\n max-width: 500px;\n font-size: 16px;\n margin-bottom: 20px;\n line-height: 1.4;\n`;\n\nconst Error = styled.div`\n font-family: \"Red Hat Display\", sans-serif;\n max-width: 500px;\n font-size: 24px;\n color: red;\n margin-bottom: 20px;\n line-height: 1.4;\n`;\n","import React, { useState } from \"react\";\n\nimport { Checkbox, Message } from \"semantic-ui-react\";\n\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\n\nimport { Link } from \"react-router-dom\";\nimport { SG_VALIDATE_EMAIL } from \"constants/actions\";\n\nimport styled from \"styled-components\";\n\nimport Logo from \"assets/images/logo.jpg\";\n\nconst Register = () => {\n const dispatch = useDispatch();\n\n\n const search = window.location.search;\n const params = new URLSearchParams(search);\n const token = params.get(\"token\");\n const [checked, setChecked] = useState(false);\n\n const [validationToken, setValidationToken] = React.useState(false);\n\n const { validate_email, get_error } = useSelector(\n (state) => ({\n validate_email: state.validateEmail.validateEmail,\n get_error: state.errors.msg,\n }),\n shallowEqual\n );\n\n function ValidateEmail() {\n if (token) {\n dispatch({\n type: SG_VALIDATE_EMAIL,\n payload: { token: token },\n });\n }\n };\n\n\n React.useEffect(() => {\n if (validate_email?.code === \"200\") {\n setValidationToken(true);\n }\n }, [validate_email]);\n\n // console.log(validate_email)\n\n return (\n {validate_email.message}
\n ) : (\n\n {!checked ?\n {validate_email.message} \n )}\n {!token &&\n No Token found }\n {get_error?.data?.token && \"Invalid Token\"}\n \n\n {!checked ? setChecked(!checked)}\n checked={checked}\n onClick={() => ValidateEmail()}\n name=\"terms\"\n label={{\n children: (\n \n I agree to the terms and conditions\n \n ),\n }}\n style={{ borderColor: \"black\" }}\n /> : \"\"}\n \n
\n \n );\n};\n\nexport default Register;\n\nconst Title = styled.div`\n font-size: 28px;\n font-weight: 900;\n margin-bottom: 40px;\n font-family: \"Red Hat Display\", sans-serif;\n`;\nconst Button = styled.button`\n width: 200px;\n height: 55px;\n border-radius: 8px;\n background-color: #6a00ff;\n color: white;\n font-size: 18px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n outline: none;\n margin-top: 20px;\n`;\nconst IMG = styled.img`\n width: 150px;\n`;\nconst Banner = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 50px;\n font-family: \"Red Hat Display\", sans-serif;\n margin-bottom: 50px;\n margin-top: 100px;\n`;\n\nconst P = styled.div`\n font-family: \"Red Hat Display\", sans-serif;\n max-width: 500px;\n font-size: 16px;\n margin-bottom: 20px;\n line-height: 1.4;\n color:${props => props.color};\n`;\n\nconst Error = styled.div`\n font-family: \"Red Hat Display\", sans-serif;\n max-width: 500px;\n font-size: 24px;\n color: red;\n margin-bottom: 20px;\n line-height: 1.4;\n`;\n","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect } from \"react\";\nimport { Icon } from \"semantic-ui-react\";\nimport ClickAwayListener from \"react-click-away-listener\";\n\nconst Container = styled.div`\n color: #4a4a4a;\n font-size: 20px;\n position: relative;\n cursor: pointer;\n margin-left: 24px;\n width: 100%;\n`;\n\nconst List = styled.div`\n box-shadow: ${(props) =>\n props.visible ? \"0 2px 20px 0 rgba(194, 194, 194, 0.5)\" : \"\"};\n border-radius: 8px;\n width: 100%;\n padding: 5px;\n position: absolute;\n top: 40px;\n height: ${(props) => (props.visible ? \"auto\" : \"0\")};\n opacity: ${(props) => (props.visible ? 1 : 0)};\n transition: height 500ms, opacity 500ms, box-shadow 500ms;\n overflow: hidden;\n background-color: white;\n max-height: 300px;\n overflow-y: scroll;\n z-index: 2;\n`;\n\nconst ListItem = styled.div`\n color: #4a4a4a;\n font-size: 16px;\n\n border-bottom: ${(props) => (props.last ? \"solid 1px #e9e9e9\" : \"\")};\n // font-weight: ${(props) => (props.selected? 900 : 500)};\n padding: 8px 8px 5px 5px;\n cursor: pointer;\n box-sizing: content-box;\n\n &:hover {\n background-color: #e9e9e9;\n }\n`;\n\nconst Check = styled.div`\n position: absolute;\n right: 0px;\n top: ${(props) => props.position};\n left: 87%;\n opacity: ${(props) => (props.visible ? 1 : 0)};\n transition: opacity 300ms, top 500ms;\n z-index: 3;\n`;\n\nconst Expand = styled.div`\n position: absolute;\n right: 40px;\n top: -5px;\n transform: ${(props) => (props.visible ? \"rotate(180deg)\" : \"rotate(0)\")};\n transition: transform 300ms;\n color: #6a00ff;\n margin-top: 3px;\n font-size: 30px;\n`;\nconst Cont = styled.div`\n background-color: #f8f8f8;\n border-radius: 10px;\n width: 350px;\n height: 60px;\n display: flex;\n align-items: center;\n margin-right: 10px;\n`;\nconst Text1 = styled.h1`\n font-size: 12px;\n font-weight: 400;\n color: #4a4a4a;\n margin-bottom: 0px;\n`;\n\nconst Description = styled.div`\n color: #9b9b9b;\n font-family: 'Red Hat Display', sans-serif;\n font-size:13px;\n`\nconst Title = styled.div`\n font-family: 'Red Hat Display', sans-serif;\n font-size:16px;\n font-weight:bold;\n margin-bottom:5px;\n`\n\nconst DropDown = (props) => {\n const [visible, setVisible] = React.useState(false);\n\n const select = (id) => {\n props.onChange(id);\n if (props.name == \"role\") {\n props.setRole(id);\n }\n };\n\n const handleClickAway = () => {\n setVisible(false);\n };\n\n useEffect(() => {\n props.onChange(props.defaultValue);\n }, [props]);\n\n\n\n\n return (\n \n Please validate your email \n
\n : \"\"}\n\n {validationToken ? (\n Please click the checkbox to accept the terms and validate your email address
\n{validate_email.message}
\n ) : (\n\n \n setVisible(visible ? false : true)}>\n {props.value !== null &&\n props.value != undefined &&\n props.value !== false\n ? props.options.find(({role}) => role === props.value)?.name\n : props.placeholder}\n \n \n \n \n
\n - setVisible(!visible)}>\n {props.options.map((item, i) => {\n return (\n
\n\t\t\t\t\n\t\t\t\tprops.cancel()}>Cancel \n\t\t\t
\n\t\tA team leader is able to invite team members to their own team. By flagging this leader to invite their team members you can save yourself the task of inviting each member yourself.
\nBoth you and the team lead will always have the ability to invite/add/remove team members from this team at any time.
\n\n no()}>\n I'd prefer to invite the members myself\n \n \n
\n \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t
\n\n\t\t| Status | \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t | \n\n\t\t\t\t\t
|---|
\n\t\t\t<Image src={Light}/>Insights \n\t\t\tThe highest priority areas within your organization. Click below to see a list of all high level insights \n\n\t\t\t
\n\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t{/*{i+1} */}\n\t\t\t\t\t\t
\n\t\t\t\t\t{item.option2?\n\t\t\t\t\t\t\n{/*\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t */}\n\t\t\t\t\t\t{categories.categories.find(f=>f.id==item.category1).name}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t{categories.categories.find(f=>f.id==item.category2).name}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t:\"\"}\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t\n
) :\n \n {/* */}\n\n \n \n
\n );\n}\n\nexport default AmbassadorPages;\n","import Mood from \"assets/images/nav/mood_alt.svg\";\nimport Report from \"assets/images/nav/report_alt.svg\";\n\nconst ToolData = [\n\t{\n\t\ttitle: \"Team Health\",\n\t\ticon: \"heartbeat\",\n\t\tcolor: \"#6a00ff\",\n\t\tdescription:\n\t\t\t\"Your home for exploring aggregated feedback, data, and insights on the health and functioning of your team’s culture.\",\n\t\trole: 10,\n\t\tlink: \"/app/team/team\",\n\t},\n\t{\n\t\ttitle: \"Team Mood\",\n\t\ticon: \"gem\",\n\t\timg: Mood,\n\t\tcolor: \"#F12DA2\",\n\t\tdescription:\n\t\t\t\"Your home for exploring aggregated feedback, data, and insights on the trending mood and morale of your team.\",\n\t\trole: 10,\n\t\tlink: \"/app/team/eq\",\n\t},\n\t{\n\t\ttitle: \"My Data\",\n\t\ticon: \"line graph\",\n\t\timg: Report,\n\t\tcolor: \"#6a00ff\",\n\t\tdescription:\n\t\t\t\"Your home for exploring individual feedback, data, and insights collected from each member of your team.\",\n\t\trole: 11,\n\t\tlink: \"/app/team/personal\",\n\t},\n\t{\n\t\ttitle: \"Connections\",\n\t\ticon: \"fork\",\n\t\tcolor: \"#F12DA2\",\n\t\tdescription:\n\t\t\t\"Your home for exploring the intricacies of how your team and its members are connected to one another.\",\n\t\trole: 8,\n\t\tlink: \"/app/team/teams?name=Connections\",\n\t},\n\t{\n\t\ttitle: \"Clusters\",\n\t\ticon: \"group\",\n\t\tcolor: \"#F12DA2\",\n\t\tdescription:\n\t\t\t\"Your home for discovering cultural and emotional trends that are impacting specific groups or pods within your team.\",\n\t\trole: 8,\n\t\tlink: \"/app/team/teams?name=Clusters\",\n\t},\n\t{\n\t\ttitle: \"Team Sentiments\",\n\t\ticon: \"zoom\",\n\t\tcolor: \"#6a00ff\",\n\t\tdescription:\n\t\t\t\"Your home for digging into the underlying sentiments and themes that are emerging from your team’s feedback.\",\n\t\trole: 8,\n\t\tlink: \"/app/team/teams?name=Sentiments\",\n\t},\n\t// {\n\t// \t\"title\":\"Organization Overview\",\n\t// \t\"icon\":\"cogs\",\n\t// \t\"color\":\"#F12DA2\",\n\t// \t\"description\":\"Your home for sharing feedback on the health of your team. Healthy teams are safe and inclusive teams that help everyone progress towards a common goal.\",\n\t// \t\"role\":5,\n\t// \t\"link\":\"/HRDash\"\n\t// }\n];\n\nexport default ToolData;\n","export default __webpack_public_path__ + \"static/media/mood_alt.13ee75fa.svg\";","export default __webpack_public_path__ + \"static/media/report_alt.a0e944d5.svg\";","import styled, { keyframes } from \"styled-components\";\nimport React from \"react\";\nimport { Icon } from 'semantic-ui-react'\nimport dataLocal from \"data/onboarding.json\";\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\nimport { Link, useLocation } from \"react-router-dom\";\n\nimport {\n\tSG_GET_ONBOARDINGS,\n\tSG_EDIT_ONBOARDING,\n} from \"constants/actions\";\n\nconst Tool = (props) => {\n\n\treturn (\n\t\t\n {teamList.map((item, i) => {\n return (\n
\n ):\"\"}\n \n \n\t\t\t\t{teamList.slice((activePage-1)*10,activePage*10).map((item, i) => {\n\t\t\t\t\t\treturn (\n
\n \n \n
)\n\t\t\t\t\t})\n\n\t\t\t}\n \n {teamList.length>10?
\n\t\t\t\n\t\t\t\tsetOnBoardingData(d)}/>\n\t\t\t\t\n\t\t\t\t{onBoardingData?.is_dismissed &&\n\t\t\t\t\t(\n\t\t\t\t\tYour Tools \n\t\t\t\t\t )}\n\t\t\t
\n\t\t\n Your free trial allows access to both the team health,\n and emotional health survey's. To continue your innerlogic\n experience, please upgrade your account in the billing section.\n
\n })\n }\n\n if (organization?.payment_status > 3) {\n setPaymentAlert({\n header: \n You may not be able access to team health,\n and emotional health survey's any longer. To continue your innerlogic\n experience, please complete your payment in the billing section.\n
\n })\n }\n }, [organization])\n\n\n\n React.useEffect(() => {\n if (employeeId) {\n setEmployee(get_employees[employeeId]);\n setBlurred(get_employees[employeeId]?.email_status === 9);\n setTimeout(() => {\n // console.log(\"I was here\")\n setLoading(false);\n }, 2000);\n // setLoading(false)\n }\n }, [get_employees, employeeId]);\n\n if (employee?.email_status === 9) {\n return (\n \n {anonymous?\n :\n employee?.picture?\n 
\n :}\n\n \n {anonymous?\"Team member\": EmployeeName()} \n is feeling \n {feeling} \n \n
\n );\n }\n\n return (\n \n \n \n {p.comment} \n \n \n
\n )\n\n\n })}\n\n \n Feedback \n What people are saying about {selectedTeam?'this ':'your '} team's {selectedName}. \n \n\n {Feedback_Checker() && selectedComment ? selectedComment.map((p, i) => {\n if (p.comment) {\n\n return \n setShow(!show)}>Show metrics \n \n \n Trust Score Distribution \n \n */}\n\n\n \n }\n\n }) : \"\"}\n\n\n \n
\n )\n}\n\nexport default Individual\n\nfunction EmployeeComment({ employeesData, employeeId, comment, anonymous }) {\n\n const [employeeInfo, setEmployeeInfo] = React.useState([])\n\n React.useEffect(() => {\n setEmployeeInfo(\n employeesData?.filter(e => e.id === employeeId)[0]\n )\n }, [employeesData, employeeId])\n\n // console.log(employeeInfo)\n // console.log(comment)\n\n return (\n \n \n {p.comment}\n \n
\n\n {/* \n {anonymous ? '' : employeeInfo?.first_name + ' ' + employeeInfo?.last_name} \n
\n \n\t\t\t\t\n\t\t\t\t\t{props.score?props.score:\"N/A\"} \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t{props.average?\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t: \n\t\t\t
\n\n\t\t\t\n Michael Bawol \n Average trust score 3.2/5 \n View Profile {forDate}\n \n \n
\n \n \n \n \n backward()}\n size={\"small\"}\n style={{ fontSize: 20, \n cursor: newIndex === 0? \"not-allowed\" :\"pointer\" ,\n zIndex: 2 }}\n />\n \n\n {CultureTitle[index]} \n \n forward()}\n size={\"small\"}\n disabled={newIndex ===5? true :false}\n style={{\n fontSize: 20,\n cursor: newIndex === 5? \"not-allowed\" :\"pointer\" ,\n zIndex: 2,\n marginLeft: 5,\n }}\n />\n \n
\n \n \n \n );\n};\n\nexport default TrendsChart;\n\nconst appear = keyframes`\n\t0% {opacity:0;left:0}\n 100% {opacity:0.7;height:40px;width:70px}\n`;\n\nconst Card = styled.div`\n box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n padding: 40px;\n position: relative;\n width: 100%;\n`;\n\nconst Selects = styled.div`\n padding: 10px;\n position: absolute;\n top: -15px;\n left: calc(50% - 150px);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n`;\nconst Select = styled.div`\n box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);\n position: absolute;\n top: 0px;\n margin-left: ${(props) => props.left};\n height: ${(props) => props.height + \"px\"};\n width: 60px;\n transition: margin 500ms;\n background-color: white;\n`;\n\nconst Overall = styled.div`\n font-size: 11px;\n font-weight: 900;\n color: #4a4a4a;\n font-family: \"Red Hat Display\", sans-serif;\n text-transform: uppercase;\n`;\n\nconst SubOverall = styled.div`\n font-size: 11px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n color: #6a00ff;\n`;\n\nconst Trends = styled.div`\n font-size: 23px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n`;\nconst HoverContainer = styled.div`\n width: 70px;\n height: 40px;\n opacity: 0.7;\n box-shadow: 0 3px 20px 0 #d3d3d3;\n background-color: black;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n margin-bottom: 100px;\n border-radius: 10px;\n font-size: 20px;\n font-weight: bold;\n color: white;\n font-family: \"Red Hat Display\", sans-serif;\n`;\n\nconst Score = styled.div`\n font-size: 20px;\n font-weight: bold;\n color: black;\n font-family: \"Red Hat Display\", sans-serif;\n margin-right: 40px;\n`;\n\nconst Arrow = styled.div`\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 10px solid black;\n position: absolute;\n bottom: -10px;\n`;\n\nconst SelectState = styled.div`\n font-size: 16px;\n font-weight: 500;\n font-family: \"Red Hat Display\", sans-serif;\n margin-right: 5px;\n`;\n\nconst Oval = styled.div`\n width: 24px;\n height: 24px;\n border-radius: 12px;\n border-style: solid;\n border-width: 1px;\n border-color: ${(props) => props.color};\n background-color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-right: 14px;\n min-width: 24px;\n`;\n\nconst Inner = styled.div`\n width: 20px;\n height: 20px;\n border-radius: 10px;\n background-image: ${(props) => (props.color ? props.color : \"white\")};\n background-color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst Hovering = styled.div`\n position: absolute;\n left: ${(props) => props.left};\n top: ${(props) => props.top};\n height: 40px;\n animation: ${appear} 500ms linear 0s 1 forwards;\n`;\n\nconst Selection = styled.div`\n width: 30px;\n border-bottom: 4px solid #2193b0;\n margin-right: 10px;\n`;\nconst SelectionTeam = styled.div`\n width: 30px;\n border-bottom: 4px dashed #2193b0;\n margin-right: 10px;\n`;\n\nconst IconArrow = styled.div`\n height: 30px;\n width: 30px;\n background-color: white;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nconst BottomText = styled.div`\n font-size: 20px;\n font-weight: bold;\n color: white;\n font-family: \"Red Hat Display\", sans-serif;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n`;\n","import styled, { keyframes } from \"styled-components\";\nimport React from \"react\";\nimport { Icon } from \"semantic-ui-react\";\nimport { useDispatch } from \"react-redux\";\nimport { SG_UPDATE_CULTURE_COMMENTS } from \"constants/actions\";\n\nconst Add_Comment = ({ cultureId, name, employee_id, ...props }) => {\n const dispatch = useDispatch();\n const [text, setText] = React.useState(\"\");\n const [visible, setVisible] = React.useState(false);\n\n const addComment = (i) => {\n if (visible) {\n setText(\"\");\n setVisible(false);\n } else {\n setVisible(true);\n }\n\tif (text.length > 3) {\n\t dispatch({\n type: SG_UPDATE_CULTURE_COMMENTS,\n payload: {\n id: cultureId,\n new_comments: {\n name,\n\t\t comment: text,\n employee_id,\n },\n },\n });\t\n\t}\n\n };\n\n return (\n \n {CultureTitle[index]} Scores \n \n My Score \n {coordinates && coordinates[position]}% \n\n Team Average \n {coordinates2 && coordinates2[position]}% \n \n
\n\n \n load(-1)}\n size={\"small\"}\n style={{ fontSize: 30, cursor: \"pointer\", zIndex: 2 }}\n />\n load(1)}\n size={\"small\"}\n style={{ fontSize: 30, cursor: \"pointer\", zIndex: 2 }}\n />\n
\n \n\t\t\t \n\t \t\n\n\t
\n\n \n \n \n setVisible(false)}\n >\n
\n \n {showFace ? {employeeName}{\" \"} : \"\"}\n {comment && comment} \n
\n \n \n {showFace ? {employeeName} : \"\"}\n {props.date} \n \n {comment && comment} \n
\n \n// \n// {props.name} {props.date} \n// \n// {comment && comment} \n//
\n// \n innerlogic \n \n Your team had {getDiff()} in {type} this week.\n \n View trends} \n // type={props.type}\n />\n
\n \n \n \n \n \n \n <IMG src={Images[selected]} />\n {culture_definitions[selected].type}\n \n \n\n\n \n {[0, 1, 2, 3, 4, 5].map((item, i) => {\n return
\n\n {culture_definitions[selected].definition}
\n| \n\t\t\t\t\t | Team | \n\t\t\t\t\tTheme | \n\t\t\t\t\tImpact | \n\t\t\t\t\tSentiment | \n\t\t\t\t\tKeywords | \n\t\t\t\t\n\n\t\t\t
|---|
\n\t\t\t\t\tNo data yet... \n\t\t\t\t\tIt looks like there isn't any data to display here.{props.cluster?' Cluster data will only be generated if your team is larger than 3 members.':\"\"} Please check back once you've collected some data or added team members. \n\t\t\t\t
\n\t\t\t\t\n\t\t\tNo Network Graph
}\n\t\t\t- \n\t\t\t\t\t\t\t\t\t{cl?.rank && cl?.rank.map((item, i) => {\n\t\t\t\t\t\t\t\t\t\treturn
- {getArea(item)} \n\t\t\t\t\t\t\t\t\t})}\n\n\t\t\t\t\t\t\t\t
- \n\t\t\t\t\t\t\t\t\t{cl?.keywords && cl?.keywords.map((kw) => {\n\t\t\t\t\t\t\t\t\t\treturn
- {kw} \n\t\t\t\t\t\t\t\t\t})}\n\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tonChange={OnSelectChange}\n\t\t\t\t\t\t\t// inline\n\t\t\t\t\t\t\toptions={ThemesList}\n\t\t\t\t\t\t\tdefaultValue={ThemesList[0].name}\n\t\t\t\t\t\t/>\n\n\n\n\t\t\t\t\t \n\t\t\t\t\tSentiment Analytics\n\t\t\t\t\t
\n\t\t\t{selectedTheme.details}
\n\t\t\t\t\n \n {props.i} \n {props.theme} \n
\n \n\n {ThemeData[props?.theme]?.description}. \n\n This theme has had a {getZscore()} impact on your scores this week, {getSentiment()} \n \n\n Theme sentiment \n \n Keywords: \n \n {props.keys.map(item => {item} )}\n \n \n
\n \n Top theme this week \n {themeList[0]?.name} \n {ThemeData[themeList[0]?.name]?.description} \n
\n \n\t\t\t\t\tTeam A \n\t\t\t\t\t\n\t\t\t\t
\n\t\t\tNo Network Graph
}\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{surveyComments?.comment}\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\tThis week
\n\t\t\t\t\n\t\t\t\tLast week
\n\t\t\t\t\n\t\t\t\tAverage
\n\t\t\t\t\n\n\t\t\t\n\n
\n )\n}\n\n\nconst EQ = ({ empMoodData, selEmp, pastDates }) => {\n\n const [chartData, setChartData] = useState([0, 0]);\n const [selected, setSelected] = React.useState(pastDates?.length - 1)\nconst [lastDate, setLastDate] = useState(format(new Date(), 'MMM do yyyy'))\nconst [dateList,setDates] = useState([])\n\n\n const data = {\n\n series: [{\n name: 'Mood score',\n data: [31, 40]\n }],\n options: {\n chart: {\n height: 350,\n type: 'area',\n toolbar: {\n show: false\n },\n zoom: {\n enabled: false\n },\n animations: {\n enabled: false\n }\n },\n grid: {\n padding: {\n right: 50\n }\n },\n dataLabels: {\n enabled: false\n },\n annotations: {\n points:\n [\n {\n x: new Date(pastDates?.[selected]).getTime(),\n y: 100,\n marker: {\n size: 8,\n },\n label: {\n text: '25%',\n borderWidth: 0,\n style: {\n fontSize: 24,\n fontWeight: 'bold'\n }\n }\n }\n ]\n },\n stroke: {\n curve: 'smooth',\n colors: ['#6a00ff']\n },\n fill: {\n colors: ['#6a00ff']\n },\n xaxis: {\n type: 'date',\n categories: pastDates\n },\n yaxis:{\n min:0,\n max:100\n },\n tooltip: {\n x: {\n format: 'dd/MM/yy HH:mm'\n },\n },\n },\n\n\n };\n\n const [options, setOptions] = React.useState(data.options)\n const [loading, setLoading] = React.useState(false)\n const [chartComments, setChartComments] = useState([]);\n\n\n const setData = (idx) => {\n console.log(idx)\n setLoading(true)\n let _options = options\n setSelected(idx)\n let _data = chartData[idx]\n\n _options.annotations.points = [\n {\n x: dateList[idx],\n y: _data,\n marker: {\n size: 8,\n },\n label: {\n text: _data + '%',\n borderWidth: 0,\n style: {\n fontSize: 24,\n fontWeight: 'bold'\n }\n }\n }\n ]\n setOptions(_options)\n setTimeout(function () {\n setLoading(false)\n }, 20);\n\n }\n\n useEffect(() => {\n setLoading(true)\n const _score = []\n const _comments = []\n const _dates = []\n\n let _options = options\n empMoodData.map(md => {\n if(md.responses.length>0){\n _score.push(md.responses[0].mood_score)\n _comments.push(md.responses[0].comments)\n }else{\n _score.push(0)\n _comments.push([])\n\n }\n _dates.push(format(\n new Date(md?.date.toLocaleString()),\n \"MMM do yyyy\"\n ))\n\n\n }\n )\n\n _dates.reverse()\n _options.xaxis.categories = _dates\n\n _score.reverse()\n let idx = _score.length - 1\n let currentScore = _score[idx]\n\n _options.annotations.points = [\n {\n x: _dates[idx],\n y: currentScore,\n marker: {\n size: 8,\n },\n label: {\n text: currentScore + '%',\n borderWidth: 0,\n style: {\n fontSize: 24,\n fontWeight: 'bold'\n }\n }\n }\n ]\n\n const checkNan = (d) =>{\n if(d===0){\n return true\n }\n if(isNaN(d)){\n return false\n }\n if(d){\n return true\n }\n\n return false\n\n }\n\n\n setChartData(_score.map(e=>(checkNan(e)?e:0)))\n setChartComments(_comments.reverse())\n setDates(_dates)\n setSelected(idx)\n setLastDate(_dates[_dates.length-1])\n setOptions(_options)\n setTimeout(function () {\n setLoading(false)\n }, 1);\n\n }, [empMoodData, options]);\n\n console.log(chartComments)\n // console.log(chartData)\n console.log(empMoodData)\n\n const move = (i) => {\n if (i > 0 && selected === chartData.length - 1) {\n return\n }\n if (i < 0 && selected === 0) {\n return\n }\n setLoading(true)\n let _options = options\n let idx = selected + i\n setSelected(idx)\n let _data = chartData[idx]\n setLastDate(dateList[idx])\n\n _options.annotations.points = [\n {\n x: dateList[idx],\n y: _data,\n marker: {\n size: 8,\n },\n label: {\n text: _data + '%',\n borderWidth: 0,\n style: {\n fontSize: 24,\n fontWeight: 'bold'\n }\n }\n }\n ]\n\n setOptions(_options)\n setTimeout(function () {\n setLoading(false)\n }, 1);\n\n }\n\n useEffect(()=>{\n console.log(selected)\n },[selected])\n\n\n return (\n \n move(-1)}\n size={\"small\"}\n style={{ fontSize: 22, cursor: \"pointer\", zIndex: 2 }}\n />\n move(1)}\n size={\"small\"}\n style={{ fontSize: 22, cursor: \"pointer\", zIndex: 2 }}\n />\n
\n \n Michael Bawol - Trust \n View Profile \n
\n \n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t Historical Analysis for Trust
\n\t\t\tKeywords that reduce
\n\t\t\t\tKeywords for growth
\n\t\t\t\t\n
\n {getPercentile(props.p1 > props.p2 ? props.p2 : props.p1)}
\n percentile\n \n {props.p1 > props.p2 ? props.t2 : props.t1}\n
\n \n \n
\n {getPercentile(props.p1 > props.p2 ? props.p1 : props.p2)}
\n percentile\n\n \n {props.p2 >= props.p1 ? props.t2 : props.t1}\n
\n \n \n \n
\n {getPercentile(\n props.bar ? Math.floor(props.position[2]) : props.position\n )}
\n percentile\n \n {props.text}\n
\n \n\t\t Low {props.trait}{\" \"}\n\t\t
\n\t\t \n\t\t High {props?.trait}{\" \"}\n\t\t
\n\t\t \n 90?90:100 - compatible[2]<10?10:100 - compatible[2]}>\n \n {compatible ? Math.floor(100 - compatible[2]) : '50'}%\n \n CONSISTENT \n \n 90?90:compatible[2]<10?10:compatible[2]}>\n \n {compatible\n ? compatible[2] === 0\n ? Math.floor(compatible[2])\n : Math.floor(compatible[2]) + 1\n : 50}\n %\n \n VARIED \n \n
\n \n\t\t \n\n\t {[0,1,2,3,4,5,6,7,8,9].map((x,i)=>{\n\t \t\tlet barHeight = team_distribution[i]/(5*multiple)\n\t \t\tlet highlight = score1>=(x)*10 && score1<=(x+1)*10 || score2>=(x)*10 && score2<=(x+1)*10\n\t \t\tif(x===0){\n\n\t \t\t\treturn \n\n\n\t {\n\t \tMath.floor(score1/10) === Math.floor(score2/10) ?\n\t \t\t \n\t \t\t\n\t\t\t\t :\n\t\t\t\t \n\t\t\t\t \t \n\n \t\t\t\t\n\n\t\t\t\t \n\t }\n\t \n\n\t \n\n\t
\n\t \n\t \tPercentiles \n\t
\n\t \t\n\t \n\t\t \n\n\t {[0,1,2,3,4,5,6,7,8,9].map((x,i)=>{\n\t \t\tlet barHeight = team_distribution[i]/(5*multiple)\n\t \t\tlet highlight = score1>=(x)*10 && score1<=(x+1)*10 || score2>=(x)*10 && score2<=(x+1)*10\n\t \t\tif(x===0){\n\n\t \t\t\treturn \n\n\n\t \n\t \n\n\t \n\n\t
\n\t \n\t \tPercentiles \n\t
\n\t \t\n\t \n \n \n setVisible(visible ? false : true)}>\n {selected\n ? getName()\n : \"Your Team\"}\n\n \n \n \n
\n - \n {props.type === 2 && (\n
\n\t Low {props.trait}{\" \"}\n\t
\n\t \n\t High {props.trait}{\" \"}\n\t
\n\t \n props.back()}/>\n {reportName} Report\n
\n What is {reportName}?
\n\n Low {reportName}{\" \"}\n
\n \n High {reportName}{\" \"}\n
\n Team {reportName} Distribution
\n\n\n 90?90:100 - balance<10?10:100 - balance}>\n \n {balance ? Math.floor(100 - balance) : '50'}%\n \n CONSISTENT \n \n 90?90:balance<10?10:balance}>\n \n {balance\n ? balance === 0\n ? Math.floor(balance)\n : Math.floor(balance)\n : 50}\n %\n \n VARIED \n \n
\n \n {getText()} \n
\n {reportName} Aspects
\n\n\n \n\n \n \n
\n }\n \n\n \n {employee ? (\n Hi {employee?.first_name} {employee?.last_name}, welcome to \n ) : (\n \"\"\n )}\n\n {myPersonality[0]?.team}'s Personality Suite \n \n The Big Five Personality Assessment is the most comprehensive and\n reliable personality assessment in the world\n \n\n Current comparison \n \n\n setCompare(value)}\n />\n relative to \n\n setCompare2(value)}\n />\n {/* setCompare(id)}\n />\n relative to \n & \n setCompare2(id)}\n />*/}\n \n
\n\n {personalityData?.length > 0 &&\n PersonalityTraitList.map((item, i) => {\n return (\n \n {getPercentile(props.p1 > props.p2 ? props.p2 : props.p1)}\n
\n \n {props.p1 > props.p2 ? props.t2 : props.t1}\n
\n \n \n {getPercentile(props.p1 > props.p2 ? props.p1 : props.p2)}\n
\n \n {props.p1 > props.p2 ? props.t1 : props.t2}\n
\n \n \n {getPercentile(\n props.bar ? Math.floor(props.position[2]) : props.position\n )}\n
\n {props.text}
\n \n\t\t \n\n\t {[0,1,2,3,4,5,6,7,8,9].map((x,i)=>{\n\t \t\tlet barHeight = team_distribution[i]/(5*multiple)\n\t \t\tlet highlight = score1>=(x)*10 && score1<=(x+1)*10 || score2>=(x)*10 && score2<=(x+1)*10\n\t \t\tif(x===0){\n\n\t \t\t\treturn \n\n\n\t {\n\t \tMath.floor(score1/10) === Math.floor(score2/10) ?\n\t \t\t \n\t \t\t\n\t\t\t\t :\n\t\t\t\t \n\t\t\t\t \t \n\n \t\t\t\t\n\n\t\t\t\t \n\t }\n\t \n\n\t \n\n\t
\n\t \n\t \tPercentiles \n\t
\n\t \t\n\t \n\t\t \n\n\t {[0,1,2,3,4,5,6,7,8,9].map((x,i)=>{\n\t \t\tlet barHeight = team_distribution[i]/(5*multiple)\n\t \t\tlet highlight = score1>=(x)*10 && score1<=(x+1)*10 || score2>=(x)*10 && score2<=(x+1)*10\n\t \t\tif(x===0){\n\n\t \t\t\treturn \n\n\n\t \n\t \n\n\t \n\n\t
\n\t \n\t \tPercentiles \n\t
\n\t \t\n\t \n \n \n setVisible(visible ? false : true)}>\n {selected\n ? getName()\n : \"Your Team\"}\n\n \n \n \n
\n - \n {props.type === 2 && (\n
\n\t Low {props.trait}{\" \"}\n\t
\n\t \n\t High {props.trait}{\" \"}\n\t
\n\t \n props.back()}/>\n {reportName} Report\n
\n What is {reportName}?
\n\n Low {reportName}{\" \"}\n
\n \n High {reportName}{\" \"}\n
\n Team {reportName} Distribution
\n\n\n 90?90:100 - balance<10?10:100 - balance}>\n \n {balance ? Math.floor(100 - balance) : '50'}%\n \n CONSISTENT \n \n 90?90:balance<10?10:balance}>\n \n {balance\n ? balance === 0\n ? Math.floor(balance)\n : Math.floor(balance)\n : 50}\n %\n \n VARIED \n \n
\n \n {getText()} \n
\n {reportName} Aspects
\n\n\n\n\t \n\t\t\t\t\n\t \t \t{dates.map((item,i)=>{\n\t \t \t\treturn move(i)}>{dates[i][1]}
{dates[i][0]} \n\t \t \t})}\n\t \t \n\t \n\t \n\t
\n\n\t\t\t)\n\n}\n\nexport default MobileChart","import styled, { keyframes } from \"styled-components\";\nimport React from \"react\";\n\nimport { Icon } from \"semantic-ui-react\";\nimport { Link, useParams } from \"react-router-dom\";\n\nimport teamdash_data from \"../../../data/teamdash_data.json\";\nimport depdash_data from \"../../../data/depdash_data.json\";\nimport MobileCard from \"./MobileCard\";\nimport MobileChart from \"./mobilechart\";\n\nimport \"./analytics.css\";\n\nconst Profile = (props) => {\n return (\n \n\t\t\t\t\t\n\t\t\t\t\t\t{coordinates[position]}% \n\t\t\t\t\t\t{props.categories[props.selected]} Score \n\t\t\t\t\t\tModerate \n\t\t\t\t\t\tThis team had a 19% increase in {props.categories[props.selected]} \n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\n\t\t\t \n\n\t \n\n\t \n\t \t
\n\t \t {dates[i][0]}
\n {props.name} \n \n {props.compliance}% Compliance\n \n
\n \n );\n};\n\nconst categories = [\"Culture\", \"Mood\", \"Leadership\"];\n\nconst MobileTeamDash = () => {\n let { type } = useParams();\n const [position, setPosition] = React.useState(0);\n const data = type == \"Team\" ? teamdash_data : depdash_data;\n const [reverse, setReverse] = React.useState(false);\n const [direction, setDirection] = React.useState(1);\n const [selected, setSelected] = React.useState(0);\n const [trends, setTrends] = React.useState(false);\n const [open, setOpen] = React.useState(false);\n\n const next = () => {\n setDirection(1);\n\n if (selected == 2) {\n setSelected(0);\n setReverse(false);\n } else {\n setSelected(selected + 1);\n setReverse(false);\n }\n };\n\n const back = () => {\n setDirection(0);\n\n if (selected == 0) {\n setSelected(2);\n setReverse(true);\n } else {\n setSelected(selected - 1);\n setReverse(true);\n }\n };\n\n return (\n \n \n {data.name} {data.type}\n \n \n {data.leader} \n
\n
\n \n\n \n Survey participation \n \n team compliance {data.overall_compliance}%\n \n
\n | \n {headers.map((item, i) => {\n return | {item[0]} | ;\n })}\n
|---|---|
| {item.team} | \n {item.scores.map((x) => {\n return{x} | ;\n })}\n
\n\t\t\t
\n\t\t)\n}\n\nexport default Teams","import styled, { keyframes } from 'styled-components';\nimport React from 'react';\nimport emotions from '../../../data/emotions.json'\nimport { Icon } from 'semantic-ui-react'\nimport { CultureTitle } from \"data/leadership\";\n\nconst Card = styled.div`\n\tposition:relative;\n\twidth:100%;\n\tmargin-bottom:5px;\n\tpadding-right:10px;\n\theight:400px;\n\tbackground-color:rgba(106, 0, 255,0.02);\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n\tmargin-top:13px;\n\tmax-height:${props=>props.open? '800px':0};\n\toverflow:hidden;\n\ttransition:all 600ms;\n`\n\nconst MoodScore = styled.div`\n\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n\tpadding:10px;\n\tposition:absolute;\n\ttop:-20px;\n\tleft:calc(50% - 85px);\n\twidth:250px;\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n\tflex-direction:column\n`\nconst Select = styled.div`\n\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n\tposition:absolute;\n\ttop:0px;\n\tmargin-left:${props=>props.left};\n\theight:${props=>props.height+'px'};\n\twidth:30px;\n\ttransition:margin 500ms;\n\tbackground-color:white;\n`\n\nconst Score = styled.div`\n\tfont-size: 30px;\n font-weight: bold;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n margin-bottom:5px;\n`\nconst Overall = styled.div`\n\tfont-size: 11px;\n font-weight: 900;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n text-transform:uppercase;\n`\n\nconst SubOverall = styled.div`\n\tfont-size: 11px;\n font-weight: bold;\n font-family: 'Red Hat Display', sans-serif;\n color: #6a00ff;\n`\n\nconst Trends = styled.div`\n\tfont-size: 23px;\n font-weight: bold;\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst DateCard = styled.div`\n\theight:43px;\n\tdisplay:flex;\n\tflex-direction:row;\n\talign-items:center;\n\tjustify-content:center;\n\tfont-size: 16px;\n line-height: 1.31;\n text-align: center;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n border-radius: 14.5px;\n border: solid 1px #e9e9e9;\n background-color: #ffffff;\n width:90%;\n margin-top:20px;\n margin-bottom:30px;\n`\nconst DateAxis = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\tflex-direction:row;\n\tjustify-content:space-between;\n\tpadding:5px 5px 5px 20px;\n`\n\nconst BottomDate = styled.div`\n\t font-size: 16px;\n font-weight: ${props=>props.current? 'bold':'500'};\n line-height: 1.19;\n text-align: center;\n color: ${props=>props.current? 'black':'#9b9b9b'};\n \n font-family: 'Red Hat Display', sans-serif;\n`\n\nfunction catmullRom2bezier(points) {\n var result = [];\n for (var i = 0; i < points.length - 1; i++) {\n var p = [];\n\n p.push({\n x: points[Math.max(i - 1, 0)].x,\n y: points[Math.max(i - 1, 0)].y\n });\n p.push({\n x: points[i].x,\n y: points[i].y\n });\n p.push({\n x: points[i + 1].x,\n y: points[i + 1].y\n });\n p.push({\n x: points[Math.min(i + 2, points.length - 1)].x,\n y: points[Math.min(i + 2, points.length - 1)].y\n });\n\n // Catmull-Rom to Cubic Bezier conversion matrix\n // 0 1 0 0\n // -1/6 1 1/6 0\n // 0 1/6 1 -1/6\n // 0 0 1 0\n\n var bp = [];\n bp.push({\n x: ((-p[0].x + 6 * p[1].x + p[2].x) / 6),\n y: ((-p[0].y + 6 * p[1].y + p[2].y) / 6)\n });\n bp.push({\n x: ((p[1].x + 6 * p[2].x - p[3].x) / 6),\n y: ((p[1].y + 6 * p[2].y - p[3].y) / 6)\n });\n bp.push({\n x: p[2].x,\n y: p[2].y\n });\n result.push(bp);\n }\n\n return result;\n}\n\nfunction makePath(points) {\n\tif (points.length === 0) {\n return null\n }\n var result = \"M\" + points[0].x + \",\" + points[0].y + \" \";\n var catmull = catmullRom2bezier(points);\n for (var i = 0; i < catmull.length; i++) {\n result += \"C\" + catmull[i][0].x + \",\" + catmull[i][0].y + \" \" + catmull[i][1].x + \",\" + catmull[i][1].y + \" \" + catmull[i][2].x + \",\" + catmull[i][2].y + \" \";\n }\n\n return result;\n}\n\nconst height = 230\nconst months =['Jan', 'Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']\n\n\nfunction sleep (time) {\n return new Promise((resolve) => setTimeout(resolve, time));\n}\n\nconst MobileChart =(props) =>{\n\tconst { culture_data } = props;\n\n\tconst calculateCoordinates = () =>{\n\t\treturn emotions.map((item,i)=>item.mood).slice(0,5)\n\t}\n\n\tconst calculateDates = () =>{\n\t\treturn emotions.map((item,i)=>[months[new Date(item.date).getMonth()],new Date(item.date).getDate()]).slice(0,5)\n\t}\n\n\tconst [position, setPosition] = React.useState(emotions.length-1)\n\tconst [width, setWidth] = React.useState(1000)\n\tconst [coordinates,setCoordinates] = React.useState([])\n\tconst [teamData,setTeamData] = React.useState([])\n\tconst [dates,setDate] = React.useState(calculateDates())\n\t const [newIndex, setNewIndex] = React.useState(0);\n\n\t const [index, setIndex] = React.useState(CultureTitle.indexOf(props.type));\n \t\tconst [type, setType] = React.useState(CultureTitle[index]);\n\n\n\tReact.useEffect(()=>{\n\tconst _TrendRow = [];\n\t CultureTitle.map((cl) => {\n const _titleRow = [];\n culture_data.map((cd) => {\n let team = cd.questions?.filter((lst) => lst.name === type)[0]?.score;\n if (cd) {\n _titleRow.push({\n id: cd.id,\n date: cd.on_date,\n team,\n title: cl\n });\n }\n // console.log(_titleRow);\n return _titleRow\n });\n // console.log(_titleRow);\n _TrendRow.push(_titleRow.reverse());\n return _TrendRow;\n });\n\n\t setTeamData(_TrendRow)\n\n\t},[culture_data,type])\n\n\t React.useEffect(() => {\n if (teamData.length > 0) {\n const calculateCoordinates = (index) => {\n return teamData[index].map((item, i) => item.team);\n };\n const calculateDates = (index) => {\n return teamData[index].map((item, i) => [\n months[new Date(item.date).getMonth()],\n new Date(item.date).getDate(),\n ]);\n };\n setCoordinates(calculateCoordinates(newIndex));\n setDate(calculateDates(newIndex))\n if (newIndex === 0) {\n setPosition(teamData[newIndex].length - 1)\n }\n \n\n }\n\n\n \n\n }, [teamData, newIndex]);\n\n\n\t React.useEffect(()=>{\n\t \tlet _index = CultureTitle.indexOf(props.type)\n\t \tsetIndex(_index)\n\t \tsetType(CultureTitle[_index])\n\t },[props.type])\n\n\n\tconst pathBuilder2 = (graph) =>{\n var points = [];\n for (var i = 0; i < graph.length; i++) {\n\n points.push({x: i*23.75+5, y: (100-graph[i])/100*height});\n }\n return points\n\t}\n\n\tconst shapeBuilder2 = (graph) =>{\n var points = [];\n\n for (var i = 0; i < graph.length; i++) {\n points.push({x: i*23.75+5, y: (100-graph[i])/100*height});\n }\n\n let path = makePath(points)\n path = path + \"V \"+(height) +\"H 5\"\n\n\n\n return path\n\t}\n\n\tconst load = (dir)=>{\n\t\tif(dir<0){\n\t\t\tsetPosition(position==0? position: position-1)\n\t\t\tprops.setPosition(position==0? position: position-1)\n\t\t}else{\n\t\t\tsetPosition(position==coordinates.length-1? position: position+1)\n\t\t\tprops.setPosition(position==coordinates.length-1? position: position+1)\n\t\t}\n\t}\n\n\tconst move = (i) =>{\n\t\tsetPosition(i)\n\t\tprops.setPosition(i)\n\t}\n\n\t const getDiff = () =>{\n \t\tif(culture_data.length<2){\n \t\t\treturn ' no change '\n \t\t}\n\n \t\tlet score1 = culture_data[0].questions.filter(f=>f.name==type)[0].score\n \t\tlet score2 = culture_data[1].questions.filter(f=>f.name==type)[0].score\n \t\tlet diff = score1 - score2\n\n \t\tif(diff >0){\n \t\t\treturn ` a ${diff}% increase `\n \t\t}\n \t\telse if(diff<0){\n \t\t\treturn ` a ${Math.abs(diff)}% decrease `\n \t\t}\n\n \t\treturn ' no change '\n\n \t}\n\n\n\t\treturn(\n\t\t\n\n\t \n\t\t\t\tYou had {getDiff()} in {type} \n\t\t\t\n\t \t \t{dates.map((item,i)=>{\n\t \t \t\treturn {dates[i][1]}
{dates[i][0]} \n\t \t \t})}\n\t \t \n\t \n\t \n\t
\n\n\t\t\t)\n\n}\n\nexport default MobileChart","import React, { useEffect, useState } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\n\nimport './analytics.css'\nimport { Link, useParams } from \"react-router-dom\"\nimport { Icon } from 'semantic-ui-react'\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport Trust from '../../../assets/images/Dependability.svg'\nimport Clarity from '../../../assets/images/Clarity.svg'\nimport Communication from '../../../assets/images/Communication.svg'\nimport Alignment from '../../../assets/images/Direction.svg'\nimport Resilience from '../../../assets/images/Resilience.svg'\nimport Impact from '../../../assets/images/Impact.svg'\n\nimport culture_definitions from '../../../data/culture_definitions.json'\nimport culture_analytics from '../../../data/culture_analytics.json'\nimport MobileChart from './mobiletrends'\nimport { SG_GET_CULTURE_DATA } from \"constants/actions\";\nimport { useNavigate } from \"react-router-dom\";\nimport EmployeeAvatar from \"components/EmpAvatar\";\n\nimport Comments from './Comments'\n\nconst cellWidth = 50\nconst cellHeight = 50\n\nconst Container = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n`\n\nconst TopCard = styled.div`\n height: 135px;\n width:100%;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n padding-bottom:26px;\n position:relative;\n\n`\nconst Content = styled.div`\n\tdisplay:flex;\n justify-content:center;\n align-items:center;\n margin-top:0px;\n flex-direction:column;\n width:100%;\n height:120px;\n position:absolute;\n top:0px;\n left:0px;\n`\n\nconst Title = styled.div`\n\tfont-size: 21px;\n font-weight: bold;\n font-family: 'Red Hat Display', sans-serif;\n margin-bottom:5px; \n`\n\nconst P = styled.p`\n\tfont-size: 16px;\n line-height: 1.31;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n text-align:center;\n width:75%;\n margin-bottom:10px;\n`\n\nconst Arrow = styled.span`\n\tfont-size:50px;\n\tposition:absolute;\n\ttop:10px;\n\tleft:${props=>props.position};\n\tcursor:pointer;\n\tuser-select: none;\n`\n\nconst Dot = styled.div`\n width: ${props=>props.selected? '8px' : '6px'};\n height: ${props=>props.selected? '8px' : '6px'};\n opacity: ${props=>props.selected? 1 : 0.6};\n background-color: #6a00ff;\n border-radius:${props=>props.selected? '4px' : '3px'};\n margin-right:6px;\n`\n\nconst IMG = styled.img`\n\tmargin-right:10px;\n\twidth:${props=>props.selected==5?'18px':props.selected==3?'50px':'34px'};\n\n`\n\nconst View = styled.div`\n font-size: 16px;\n font-weight: bold;\n color: #6a00ff;\n font-family: 'Red Hat Display', sans-serif;\n text-align: center;\n`\nconst BottomContainer = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\tflex-direction:row;\n\tjustify-content:space-evenly;\n\tmargin-top:20px;\n`\n\nconst ScoreCard = styled.div`\n\twidth: ${props=>props.open?'162px':'80px'};\n\theight:100%;\n\tbox-shadow: 0 4px 20px 0 #ececec;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n\ttransition:width 500ms;\n`\nconst CommentCard = styled.div`\n\twidth:calc(100% - 110px);\n\theight:100%;\n\tbox-shadow: 0 2px 40px 0 #ececec;\n\topacity:${props=>props.open?0.2:1};\n`\nconst ScoreTitle = styled.div`\n\tfont-size: 14px;\n\tfont-family: 'Red Hat Display', sans-serif;\n\ttext-align:center;\n\tmargin-top:10px;\n`\n\nconst Expand = styled.div`\n\tcolor:#6a00ff;\n\tfont-size:12px;\n\ttext-align:center;\n\tfont-weight:bold;\n\tmargin-top:10px;\n`\n\n\nconst Box = styled.div`\n\theight:50px;\n\twidth:50px;\n\tmin-width:50px;\n\tmin-height:50px;\n\tz-index:2;\n\tmargin-bottom:1px;\n\tbackground-color:${props=> props.background };\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n`;\n\nconst YouBox = styled.div`\n\theight:65px;\n\twidth:50px;\n\tmin-width:50px;\n\tmin-height:50px;\n\tz-index:2;\n\tmargin-bottom:10px;\n\tbackground-color:${props=> props.background };\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n`;\n\n\nconst Score = styled.div`\n\tcolor:white;\n\tfont-size: 23px;\n \tfont-weight: bold;\n\ttransition:opacity 500ms,margin 300ms;\n\tfont-family: 'Red Hat Display', sans-serif;\n\ttext-align:center;\n`\n\nconst Avatar = styled.img`\n height:40px;\n width:40px;\n border-radius:20px;\n`\n\nconst ScoreBoxContainer = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\tflex-direction:row;\n\tjustify-content:space-evenly;\n\talign-items:center;\n`\n\nconst order=[\"Trust\",\"Communication\",\"Alignment\",\"Resilience\",\"Clarity\",\"Impact\"]\nconst colors = ['#e0d2fe','#9f73fb','#8d59fa','#7e44fa','#4f00f7']\nconst Images = [Trust,Communication,Alignment,Resilience,Clarity,Impact]\n\nconst ScoreBox = ({data,search,open,you}) =>{\n\t const score = data.responses.find(({name}) => name === search).answer\n\tif(you){\n\t\treturn (\n\t\t\n\n\t\t\t \n\n\t \n\n\t \n\t \t
\n\t \t {dates[i][0]}
YOU
{culture_definitions[selected].definition}
\n\t\t\t\t\t\t\t\n\t\t\t\t\t{[0,1,2,3,4,5,].map((item,i)=>{\n\t\t\t\t\t\treturn \n\t\t\t\t\t})}\n\t\t\t\t
\n\n\t\t\t\t\n\n\t\t\t\tScores
\n\t\t\t\t\tMINIMIZE\n\t\t\t\t\t\t:<>⤢
\n\t\t\t\t\tEXPAND}
\n 
? }\n {employeeFullName} \n {/* {employee?.last_name} */}\n
)\n};\n\nexport default EmployeePicture;\n\nconst Avatar = styled.img`\n height:50px;\n width:50px;\n border-radius:25px;\n margin-right:31px;\n\n`\nconst Name = styled.div`\n\tfont-size: 14px;\n font-weight: 500;\n color: #4a4a4a;\n margin-right:5px;\n`\n\nconst Checked = styled.div`\n width: 22px;\n height: 22px;\n border: solid 2px #ffffff;\n background-color: #1e2172;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:11px;\n position:absolute;\n left:30px;\n top:30px;\n`\n\nconst UnChecked = styled.div`\n\twidth: 22px;\n height: 22px;\n border: solid 2px #1e2172;\n background-color: #ffffff;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:11px;\n font-size: 16px;\n font-weight: bold;\n color: #1e2172;\n font-family: 'Red Hat Display', sans-serif;\n position:absolute;\n left:30px;\n top:30px;\n`","import styled, { keyframes } from 'styled-components';\nimport React,{useState,useEffect} from 'react';\nimport Check from '../../assets/images/check-white.svg'\n\nconst Avatar = styled.img`\n height:50px;\n width:50px;\n border-radius:25px;\n margin-right:31px;\n\n`\nconst Name = styled.div`\n\tfont-size: 14px;\n font-weight: 500;\n color: #4a4a4a;\n margin-right:5px;\n`\n\nconst Checked = styled.div`\n width: 22px;\n height: 22px;\n border: solid 2px #ffffff;\n background-color: #1e2172;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:11px;\n position:absolute;\n left:30px;\n top:30px;\n`\n\nconst UnChecked = styled.div`\n\twidth: 22px;\n height: 22px;\n border: solid 2px #1e2172;\n background-color: #ffffff;\n display:flex;\n align-items:center;\n justify-content:center;\n border-radius:11px;\n font-size: 16px;\n font-weight: bold;\n color: #1e2172;\n font-family: 'Red Hat Display', sans-serif;\n position:absolute;\n left:30px;\n top:30px;\n`\n\nconst CompleteAvatar = (props) =>{\n\n\treturn (\n\t\t\n\t\t\t
? }\n\t\t\t{props.first} \n\t\t\t{props.last} \n\t\t
\n\t\t)\n\n\n}\n\nexport default CompleteAvatar","import styled from \"styled-components\";\nimport React from \"react\";\nimport CompleteAvatar from \"./Avatar\";\nimport LeftAvatar from \"components/LeftAvatar\";\n\nconst Panel = ({ user, view, setView, userCount }) => {\n// console.log(user)\n return (\n \n\n {user ? (\n \n\n\t \n\t\t\t\t \n\n\n\t
\n\n\n\t \n\n\t\t\t)\n\n}\n\nexport default Analytics\n\nconst appear = keyframes`\n\t0% {opacity:0;left:0}\n 100% {opacity:0.7;height:40px;width:70px}\n`;\n\nconst Card = styled.div`\n\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n\tpadding:40px;\n\tposition:relative;\n\twidth:100%;\n`\n\nconst Selects = styled.div`\n\tpadding:10px;\n\tposition:absolute;\n\ttop:-15px;\n\tleft:calc(50% - 150px);\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n\tflex-direction:row;\n`\nconst Select = styled.div`\n\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n\tposition:absolute;\n\ttop:0px;\n\tmargin-left:${props=>props.left};\n\theight:${props=>props.height+'px'};\n\twidth:60px;\n\ttransition:margin 500ms;\n\tbackground-color:white;\n`\n\n\nconst Overall = styled.div`\n\tfont-size: 11px;\n font-weight: 900;\n color: #4a4a4a;\n font-family: 'Red Hat Display', sans-serif;\n text-transform:uppercase;\n`\n\nconst SubOverall = styled.div`\n\tfont-size: 11px;\n font-weight: bold;\n font-family: 'Red Hat Display', sans-serif;\n color: #6a00ff;\n`\n\nconst Trends = styled.div`\n\tfont-size: 23px;\n font-weight: bold;\n font-family: 'Red Hat Display', sans-serif;\n`\nconst HoverContainer = styled.div`\n\twidth: 70px;\n height: 40px;\n opacity: 0.7;\n box-shadow: 0 3px 20px 0 #d3d3d3;\n background-color:black;\n display:flex;\n justify-content:center;\n align-items:center;\n position:relative;\n margin-bottom:100px;\n border-radius:10px;\n font-size: 20px;\n font-weight: bold;\n color:white;\n font-family: 'Red Hat Display', sans-serif;\n\n\n`\n\nconst Score = styled.div`\n\t font-size: 20px;\n font-weight: bold;\n color:black;\n font-family: 'Red Hat Display', sans-serif;\n margin-right:40px;\n`\n\nconst Arrow = styled.div`\n\twidth: 0; \n height: 0; \n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 10px solid black;\n position:absolute;\n bottom:-10px;\n`\n\nconst SelectState = styled.div`\n\tfont-size: 16px;\n font-weight: 500;\n font-family: 'Red Hat Display', sans-serif;\n margin-right:5px;\n \n`\n\nconst Oval = styled.div`\n\twidth: 24px;\n height: 24px;\n border-radius:12px;\n border-style: solid;\n border-width: 1px;\n border-color:${props=>props.color};\n background-color: #ffffff;\n display:flex;\n align-items:center;\n justify-content:center;\n cursor:pointer;\n margin-right:14px;\n min-width:24px;\n`\n\nconst Inner = styled.div`\n\twidth: 20px;\n height: 20px;\n border-radius:10px;\n background-image: ${props=>props.color? props.color:'white'};\n background-color: #ffffff;\n display:flex;\n align-items:center;\n justify-content:center;\n`\n\nconst Hovering = styled.div`\n\tposition:absolute;\n\tleft:${props=>props.left};\n\ttop:${props=>props.top};\n\theight:40px;\n\t animation: ${appear} 500ms linear 0s 1 forwards;\n`\n\nconst Selection = styled.div`\n\twidth:30px;\n\tborder-bottom:4px solid #ffb812;\n\tmargin-right:10px;\n`\nconst SelectionTeam = styled.div`\n\twidth:30px;\n\tborder-bottom:4px dashed #ffb812;\n\tmargin-right:10px;\n`\n\nconst IconArrow = styled.div`\n\theight:30px;\n\twidth:30px;\n\tbackground-color:white;\n\tborder-radius:15px;\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n`\n\nconst BottomText = styled.div`\n\t font-size: 20px;\n font-weight: bold;\n color:white;\n font-family: 'Red Hat Display', sans-serif;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n`\n","import styled, { keyframes } from 'styled-components';\nimport React,{useState} from 'react';\n\n\nconst Card = styled.div`\n\tbox-shadow: 0 2px 40px 0 rgba(220, 220, 220, 0.5);\n\tborder-radius: 8px;\n\tdisplay:inline-block;\n\tflex-direction:column;\n\twidth:360px;\n\toverflow:hidden;\n\tposition:absolute;\n`\n\n\nconst CardP = styled.div`\n\t font-size: 16px;\n\t color: #ffffff;\n font-family: 'Red Hat Display', sans-serif;\n margin-top:10px;\n\n`\n\nconst CardBottom = styled.div`\n\twidth:100%;\n\theight:50px;\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n`\nconst ScoreCard = styled.div`\n\theight:300px;\n\twidth:100%;\n\tpadding:20px;\n\t background-image: linear-gradient(94deg, #ffb347 2%, #ffcc33 109%);\n\t display:flex;\n\t justify-content:center;\n\t flex-direction:column;\n`\nconst CardText = styled.div`\n\tfont-size: 23px;\n font-weight: bold;\n color: #ffffff;\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst EmptyCard = ({selected,title}) =>{\n\n\treturn (\n\t\t\n\t\t\t\t\t{Leadershiptitle[index]} Scores \n\t\t\t\t\t\n\t\t\t\t\t\tSelf-score \n\t\t\t\t\t\t{coordinates && coordinates[position]} \n\n\t\t\t\t\t\tTeam Average \n\t\t\t\t\t\t{coordinates2 && coordinates2[position]} \n\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tload(-1)} size={\"small\"} style={{fontSize:30,cursor:'pointer',zIndex:2}}/>\n\t\t\t\t\tload(1)} size={\"small\"} style={{fontSize:30,cursor:'pointer',zIndex:2}}/>\n\n\t\t\t
\n\n\t\t\t \n \n \n 1\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 5\n \n \n\n \n\n \n \n \n \n \n {coordinates && \n \n \n \n \n {coordinates2 && \n {dates && dates.map((item, i) => {\n return (\n \n \n {dates[i][0]}\n \n \n {dates[i][1]}\n \n \n );\n })}\n\n {coordinates && coordinates.map((item, i) => {\n if (!item) {\n return null;\n }\n\n if (i != position) {\n return (\n \n move(i)}\n style={{ transition: \".4s ease\", cursor: \"pointer\" }}\n />\n \n );\n }\n return (\n \n move(i)}\n style={{ transition: \".4s ease\", cursor: \"pointer\" }}\n />\n \n );\n })}\n\n {coordinates2 && coordinates2.map((item, i) => {\n if (!item) {\n return null\n }\n if (i != position) {\n return (\n \n move(i)}\n style={{ transition: \".4s ease\", cursor: \"pointer\" }}\n />\n \n );\n }\n return (\n \n move(i)}\n style={{ transition: \".4s ease\", cursor: \"pointer\" }}\n />\n \n );\n })}\n \n
\n\n\t \n\t\t \tbackward()} size={\"small\"} style={{fontSize:20,cursor:'pointer',zIndex:2}}/> {Leadershiptitle[index]} \n\t\t \t forward()} size={\"small\"} style={{fontSize:20,cursor:'pointer',zIndex:2,marginLeft:5}}/>
\n\t \n \n {Leadershiptitle[selected]} Response Distribution\n \n
\n {ansData.length > 0 && ansDist.length > 0 ? (\n \n\t\t\t\t{formErrors.length > 0 && !pristine &&\n\t\t\t\t\t\n\t\t\t\t}\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tsetBriefType(1)}\n\t\t\t style={{marginRight:20}}\n\t\t\t />\n\n\t\t\t setBriefType(2)}\n\t\t\t />\n\t\t\t\t\t{/*{TypesOfBriefs.map(tb => {\n\t\t\t\t\t\treturn \n\n\t\t\t\t\n\t\t\t\t\t\n\n\t\t\t\t\t option.name}\n\t\t\t\t\t\tgetOptionValue={(option) => option.id}\n\t\t\t\t\t/>\n\t\t\t\t \n\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t setInviteMembers(!inviteMembers)}\n\t\t\t\t\t\tlabel='Members' style={{ marginRight: 10 }}\n\t\t\t\t\t\tchecked={inviteMembers} />\n\t\t\t\t\t setInviteLeaders(!inviteLeaders)}\n\t\t\t\t\t\tchecked={inviteLeaders}\n\t\t\t\t\t\tlabel='Leaders' />\n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t UpdateTimezone(e)}\n\t\t\t\t\t\tvalue={timeZone}\n\t\t\t\t\t\toptions={SortedTimezone()}\n\t\t\t\t\t/>\n\t\t\t\t \n\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t \n\n\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t{/* */}\n\n\t\t\t\t\t UpdateNofHours(e)}\n\t\t\t\t\t\tvalue={selectedNoOfHours}\n\t\t\t\t\t\toptions={HoursList}\n\t\t\t\t\t/>\n\t\t\t\t \n\n\t\t\t\t 0 && !pristine}\n\t\t\t\t\tonClick={onSubmit}>{briefId? \"update\" : \"Schedule\"}\n\t\t\t
\n\t)\n}\n\nexport default AddSchedule\n\n\nconst Container = styled.div`\n\t// margin-top:30px;\n\tfont-family: 'Red Hat Display', sans-serif;\n\t// padding:30px;\n\t// box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\twidth:400px;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-bottom:30px;\n`\n\nconst Label = styled.div`\n\tmargin-bottom:10px;\n\tfont-weight:bold;\n`\n\nconst FormContainer = styled.div`\n\tmax-width:300px;\n\tmargin-top:20px;\n`\n\nconst FormContainerTop = styled.div`\n\tmax-width:300px;\n\tmargin-top:0px;\n`\n\nconst Submit = styled.button`\n\tborder-radius: 5px;\n background-color:${props => props.disable ? '#dcdcdc' : '#6a00ff'};\n font-size: 14px;\n font-weight: bold;\n color:white;\n padding: 10px;\n display:flex;\n align-items:center;\n justify-content:center;\n width:200px;\n margin-top:30px;\n cursor:${props => props.disable ? 'not-allowed' : 'pointer'};\n border:none;\n\n`\n\nconst Types = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n`\n\nconst TypeContainer = styled.div`\n\twidth:400px;\n\tmargin-right:30px;\n\tmargin-top:20px;\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\tdisplay:flex;\n\tpadding:30px;\n cursor: pointer;\n\tbackground-color:${props => props.selected ? 'red' : 'gray'};\n`\nconst TypeName = styled.div`\n\tfont-size:22px;\n\tfont-weight:bold;\n\tmargin-bottom:15px;\n`\n\nconst Description = styled.div`\n\tcolor:#757575;\n`\n\nconst Image = styled.img`\n\twidth:100px;\n`\n\nconst See = styled.div`\n\tmargin-top:10px;\n\tcolor:#6a00ff;\n`\n","export default __webpack_public_path__ + \"static/media/calendar.295f9058.png\";","export default \"data:image/png;base64,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CDgJAgCoxs/2TUfHRwEHjQg4QQIAqEYn59i3zynAAHJj4AkQAEBVdu0+WHoCTXBj4HETAEBVnt71nG8EHFwuBxwHAQBUZWY2x7N7DpWeQXNcDjhGAgCozuM7JktPoEkuBxwTAQBUZ9/+mdj7s+nSM2iWywEvQQAAVfrJ4/vCrQADz+WAoxAAQJX27Z+JnbumSs+gaS4HvCgBAFTrse37YsYfCKqBk4AjEABAtWZmOvG9H+11KaAGTgJ+iQAAqrZ776F44kmfCqiEGwN/gQAAqveTv90fz+7xDYGVcDngMAEAVC/niO/8YG/s2+/vBFQhpRsm/vLQH5WeUZoAAIiITifHtu/tFgHVyB+Y+O8Hf7P0ipIEAMBhM7Od2PKdZ31VcB1a0Yr/esud+dTSQ0oRAAC/oNPJ8ej3d8cTOyZ9OmDwLTvYnv53pUeUIgAAXiDniB9v3x+Pfn+37wkYePn37rwzD5VeUYIAAHgRz+45FP/nkWfi7548UHoKzXn590YOvqX0iBIEAMBRzMx24kc/3Rf/d9uu2PMz9wYMok4nva30hhLapQcA9IN9+2fib76zO04ZG46zXzEWp582Giml0rOYH28qPaAEAQBwHPZNzsSj398Tw+0US89YGGecvjBOGR+OlhjoZ8tKDyhBAACcgJnZHH/31HPxd089F0OtFKeMD8f44pFYuLAdixa2Y2SkFUNDrWgPhZOCHpdznF16QwkCAOAkzXVy7PnZdOz52XTpKZyYBaUHlOAmQACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAAgAoJAACokAAA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\"","import React, { useEffect } from 'react'\nimport styled from \"styled-components\";\nimport { Button, Icon, Modal } from 'semantic-ui-react'\n\nimport AddSchedule from \"debriefs/AddSchedule\"\n\nimport Pic1 from 'assets/images/calendar.png'\nimport Pic2 from 'assets/images/google-docs.png'\n\nconst TypesOfBriefs = [\n {\n id: 1,\n name: 'Game',\n describe: \"Short Description in JSON Learn more opne new window\",\n learnMore: \"link goes here\",\n image: Pic1\n },\n {\n id: 2,\n name: 'Practice',\n describe: \"Short Description in JSON Learn more opne new window\",\n learnMore: \"link goes here\",\n image: Pic2\n }\n]\n\n\nconst AddNew = ({ showReportId,\n debriefSchedule, setFetchAgain,\n setShowReportId, ...props}) => {\n const [briefType, setBriefType] = React.useState(false)\n const [firstOpen, setFirstOpen] = React.useState(false)\n\n function ResetFirst() {\n setFirstOpen(false)\n if (!showReportId) {\n setBriefType(false)\n }\n }\n\n function CloseAll() {\n setFirstOpen(false)\n // setFetchAgain(1)\n }\n\n useEffect(() => {\n setBriefType(TypesOfBriefs.find((tb) => tb.id === debriefSchedule?.type_of))\n }, [debriefSchedule]);\n\n\n return (\n <>\n {showReportId ?\n \n :\n | Type | \nDate & Time(Local) | \nClosing Time | \nStatus | \nCompletion | \n\n\n | |
|---|---|---|---|---|---|---|
| \n | \n \n {brief?.team_name}\n | \n\n {format(\n new Date(brief?.scheduled_for?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n \n {brief?.time_zone}\n | \n \n\n {brief?.close_at &&\n format(\n new Date(brief?.close_at?.toLocaleString()),\n \"h:mm a\"\n )}\n | \n\n {brief?.status_text}\n | \n\n {brief?.total_responses} / {brief?.total_requests}\n | \n\n {brief?.status === 1 ?\n <>\n {createEdit &&\n <>\n | \n\n
}\n\t\t\t{employee.picture?}\n\t\t\t{employee?.name} \n\t\t\n\t\t)\n}\n\n\nconst Completion = ({employeeList, averageResp}) =>{\n\t// console.log(employeeList)\n\n\treturn (\n\t\t\n\t\t\tTeam Completion \n\t\t\t \n\t\t\t {employeeList.map((em, i) => {\n\t\t\t\treturn \n\t\t)\n}\n\n\nexport default Completion\n\n\n\nconst Container = styled.div`\n\twidth:100%;\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\tpadding:30px;\n\tmargin-top:20px;\n\tbackground-color:#15056b;\n`\n\nconst Title = styled.div`\n\tcolor:white;\n\tfont-weight:bold;\n\tfont-size:18px;\n`\n\nconst Average = styled.div`\n\tfont-size:50px;\n\tfont-weight:bold;\n\twidth:100%;\n\tpadding:20px 0px;\n\tdisplay:flex;\n\tjustify-content:center;\n`\n\nconst Description = styled.div`\n\twidth:100%;\n\tjustify-content:center;\n\tdisplay:flex;\n`\n\nconst Member = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\talign-item:center;\n\tmargin-top:10px;\n`\n\nconst Avatar = styled.img`\n\twidth:20px;\n\theight:20px;\n\tborder-radius:10px;\n\tmargin-right:5px;\n`\n\nconst Name = styled.div`\n\tfont-size:12px;\n\tcolor:white;\n`","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\nimport Comment from './Comment'\nimport Summary from './Summary'\nimport Completion from './Completion'\nimport { Checkbox } from 'semantic-ui-react'\n\n\nconst Practice = ({ debriefResponses, questions,\n\tdebriefSchedule, get_employees, teamId }) => {\n\n\tconst [questionTab, setQuestionTab] = useState(0)\n\tconst [practiceQues, setPracticeQues] = useState([])\n\tconst [employeeList, setEmployeeList] = useState([])\n\tconst [dispEmpList, setDispEmpList] = useState([])\n\tconst [averageResp, setAverageResp] = useState(0)\n\tconst [showMemberData, setShowMemberData] = useState(true)\n\tconst [showLeaderData, setShowLeaderData] = useState(true)\n\n\tuseEffect(() => {\n\t\tif (questions?.questions) {\n\t\t\tsetPracticeQues(questions?.questions)\n\t\t\tsetQuestionTab(questions?.questions[0])\n\t\t}\n\t}, [questions]);\n\n\tuseEffect(() => {\n\t\tsetShowMemberData(debriefSchedule?.include_members)\n\t\tsetShowLeaderData(debriefSchedule?.include_leaders)\n\t}, [debriefSchedule]);\n\n\tuseEffect(() => {\n\t\tconst _EmpListing = []\n\t\tget_employees.filter(em => em.team === teamId).map((item) => {\n\t\t\tlet fullName = item.first_name ? `${item.first_name} ${item.last_name}` : `${item.email}`\n\t\t\tlet _scores = {}\n\t\t\tlet answered = false\n\t\t\tif (debriefResponses.filter(db => db.employee === item.id)[0]?.response) {\n\t\t\t\t_scores = debriefResponses.filter(db => db.employee === item.id)[0]?.response\n\t\t\t\tanswered = true\n\t\t\t}\n\t\t\tif (debriefSchedule?.include_leaders) {\n\t\t\t\tif (item.role < 7) {\n\t\t\t\t\t_EmpListing.push({\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tpicture: item.picture,\n\t\t\t\t\t\temail: item.email,\n\t\t\t\t\t\tname: fullName,\n\t\t\t\t\t\tleader: item.role < 7 ? true : false,\n\t\t\t\t\t\tmember: item.role > 7 ? true : false,\n\t\t\t\t\t\tanswered: answered,\n\t\t\t\t\t\t..._scores\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (debriefSchedule?.include_members) {\n\t\t\t\tif (item.role > 7) {\n\t\t\t\t\t_EmpListing.push({\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tpicture: item.picture,\n\t\t\t\t\t\temail: item.email,\n\t\t\t\t\t\tname: fullName,\n\t\t\t\t\t\tleader: item.role < 7 ? true : false,\n\t\t\t\t\t\tmember: item.role > 7 ? true : false,\n\t\t\t\t\t\tanswered: answered,\n\t\t\t\t\t\t..._scores\t\t\t\t\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t})\n\t\tsetEmployeeList(_EmpListing)\n\n\t}, [get_employees, teamId,debriefSchedule, debriefResponses]);\n// console.log(employeeList)\n\n\tuseEffect(() => {\n\t\tlet AnsweredEm = 0\n\t\tlet EmpScoreTotal = 0\n\t\tlet _EmpDisList = []\n\t\tif (showMemberData) {\n\t\t\t_EmpDisList = employeeList.filter(el =>\n\t\t\t\tel.member === showMemberData\n\t\t\t\t&& el.answered === true\n\t\t\t).map((item) => {\n\t\t\t\tAnsweredEm += 1\n\t\t\t\tEmpScoreTotal += item?.['3']\n\t\t\t\treturn item\n\t\t\t})\n\t\t}\n\t\t\tlet _LeadDisList = []\n\t\t\tif (showLeaderData) {\n\t\t\t\t_LeadDisList = employeeList.filter(el =>\n\t\t\t\t\tel.leader === showLeaderData\n\t\t\t\t\t&& el.answered === true\n\t\t\t\t).map((item) => {\n\t\t\t\t\tAnsweredEm += 1\n\t\t\t\t\tEmpScoreTotal += item?.['3']\n\t\t\t\t\treturn item\n\t\t\t\t})\n\n\n\t\t\t}\n\t\t\t\n\t\t\tsetDispEmpList([..._EmpDisList, ..._LeadDisList])\n\t\t\tsetAverageResp(AnsweredEm > 0 ? Math.round((EmpScoreTotal /AnsweredEm)) : 0)\n\t\t}, [employeeList, debriefResponses, showMemberData, showLeaderData]);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tPractice Debrief \n\t\t\t\t{practiceQues.filter(pq => pq.visible === true).map((item, i) => {\n\t\t\t\t\treturn setQuestionTab(item)}>Q{item.id}\n\t\t\t\t})}\n\t\t\t\t\n\n\t\t\t\t\t setShowMemberData(!showMemberData)}\n\t\t\t\t\t\tstyle={{ marginRight: 10 }}\n\t\t\t\t\t/>\n\t\t\t\t\t setShowLeaderData(!showLeaderData)}\n\t\t\t\t\t/>\n\t\t\t\t \n\t\t\t \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{questionTab?.question} \n\n\t\t\t\t\t{dispEmpList.filter(el => el.answered === true).map((item, i) => {\n\t\t\t\t\t\t// if (questionTab?.id in item) {\n\t\t\t\t\t\treturn \n\n\t\t\t\t\n\n\t\t\t\t\t \n\t\t\t \n\t\t \n\t)\n}\n\n\nexport default Practice\n\n\n\nconst Container = styled.div`\n font-family: 'Red Hat Display', sans-serif;\n`\n\nconst Top = styled.div`\n\theight:70px;\n\tmargin-top:10px;\n\tborder-bottom:1px solid #ebebeb;\n\twidth:65%;\n\tdisplay:flex;\n\talign-items:center;\n\tpadding:10px;\n\tposition:relative;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-right:20px;\n`\n\nconst Bottom = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n\tjustify-content:space-between;\n`\n\nconst CommentContainer = styled.div`\n\twidth:65%;\n\n`\n\nconst MetaContainer = styled.div`\n\twidth:30%;\n\tmargin-top:60px;\n`\n\nconst Tabi = styled.div`\n\tpadding:8px 12px;\n\tbackground-color:${props => props.selected ? '#15056b' : '#ebebeb'};\n\tborder-radius:15px;\n\tmargin-right:10px;\n\tcolor:white;\n\tfont-weight:bold;\n\tcursor:pointer;\n`\n\nconst Question = styled.div`\n\tfont-size:20px;\n\tfont-weight:500;\n\tmargin-top:20px;\n`\n\nconst CheckContainer = styled.div`\n\tposition:absolute;\n\tright:0;\n`","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\n// import { useDispatch, useSelector, shallowEqual } from \"react-redux\";\nimport { Checkbox, Icon, Dimmer, Loader } from 'semantic-ui-react'\nimport Chart from \"react-apexcharts\";\n\n\nconst TableRow = ({ emp }) => {\n\t// console.log(emp)\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{emp.picture ? {emp?.name} \n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Average}\n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Consistency}\n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Composure}\n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Confidence}\n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Compete}\n\t\t\t \n\t\t\t\n\t\t\t\t{emp?.Cohesion}\n\t\t\t \n\t\t \n\t)\n}\n\nconst Card = (props) => {\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\t{props?.title} \n\t\t\t\tWe sustained our best all the way through this performance, from start to finish. \n\t\t\t \n\t\t\t{props?.score}% \n\t\t \n\t)\n}\n\n\nconst factors = ['Consistency', 'Composure', 'Confidence', 'Compete', 'Cohesion']\n\nconst Game = ({ debriefResponses, questions,\n\tdebriefSchedule, get_employees, teamId }) => {\n\n\tconst [wordList, setWordList] = useState([])\n\tconst [employeeList, setEmployeeList] = useState([])\n\tconst [debriefSummary, setDebriefSummary] = useState([])\n\tconst [seriesChartData, setSeriesChartData] = useState(false)\n\n\tconst [dir, setDir] = useState(1)\n\tconst [sorted, setSorted] = useState('Average')\n\tconst [loading, setLoading] = useState(true)\n\n\tconst [showMemberData, setShowMemberData] = useState(true)\n\tconst [showLeaderData, setShowLeaderData] = useState(true)\n\tconst [allowMemberData, setAllowMemberData] = useState(false)\n\tconst [allowLeaderData, setAllowLeaderData] = useState(false)\n\tconst [dispEmpList, setDispEmpList] = useState([])\n\n\n\t// console.log(questions)\n\t// console.log(debriefSchedule)\n\t// console.log(get_employees)\n\n\tuseEffect(() => {\n\t\tconst _WordListing = []\n\t\tif (questions) {\n\t\t\tquestions.questions.map((item) => {\n\t\t\t\treturn _WordListing.push(item.name)\n\t\t\t})\n\t\t\tsetWordList(_WordListing)\n\t\t}\n\t}, [questions]);\n\n\tuseEffect(() => {\n\t\tsetTimeout(() => setLoading(false), 1000);\n\t}, [seriesChartData])\n\n\tconst sort = (type) => {\n\t\tlet _dir = dir\n\t\tif (type === sorted) {\n\t\t\t_dir = _dir * -1\n\t\t\tsetDir(_dir)\n\t\t}\n\t\tsetSorted(type)\n\t\tif (_dir > 0) {\n\t\t\tlet _dispEmpList = dispEmpList.sort(function (a, b) {\n\t\t\t\treturn a[type] - b[type]\n\t\t\t})\n\t\t\treturn setDispEmpList(_dispEmpList)\n\t\t}\n\t\tlet _dispEmpList = dispEmpList.sort(function (a, b) {\n\t\t\treturn b[type] - a[type]\n\t\t})\n\t\treturn setDispEmpList(_dispEmpList)\n\t}\n\n\tuseEffect(() => {\n\t\tconst _EmpListing = []\n\n\t\tget_employees.filter(em => em.team === teamId).map((item) => {\n\t\t\tlet fullName = item.first_name ? `${item.first_name} ${item.last_name}` : `${item.email}`\n\t\t\tconst _scores = {}\n\t\t\tlet Average = 0\n\t\t\tlet NofOf = 0\n\t\t\t// console.log(debriefResponses.filter(db => db.employee === item.id)[0]?.response)\n\t\t\tif (debriefResponses.filter(db => db.employee === item.id)[0]?.response) {\n\n\t\t\t\tconst UserScore = (Object.values(debriefResponses.filter(db => db.employee === item.id)[0]?.response))\n\n\t\t\t\twordList.map((wl, k) => {\n\t\t\t\t\t_scores[wl] = UserScore[k]\n\t\t\t\t\tAverage += UserScore[k]\n\t\t\t\t\tNofOf += 1\n\t\t\t\t\treturn null\n\t\t\t\t})\n\n\t\t\t\t_scores['Average'] = Average / NofOf\n\t\t\t} else {\n\t\t\t\twordList.map((wl, k) => {\n\t\t\t\t\treturn _scores[wl] = 0\n\t\t\t\t})\n\t\t\t\t_scores['Average'] = 0\n\t\t\t}\n\t\t\tif (debriefSchedule?.include_leaders) {\n\t\t\t\tif (item.role < 7) {\n\t\t\t\t\t_EmpListing.push({\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tpicture: item.picture,\n\t\t\t\t\t\temail: item.email,\n\t\t\t\t\t\tname: fullName,\n\t\t\t\t\t\tleader: item.role < 7 ? true : false,\n\t\t\t\t\t\tmember: item.role > 7 ? true : false,\n\t\t\t\t\t\t..._scores\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (debriefSchedule?.include_members) {\n\t\t\t\tif (item.role > 7) {\n\t\t\t\t\t_EmpListing.push({\n\t\t\t\t\t\tid: item.id,\n\t\t\t\t\t\tpicture: item.picture,\n\t\t\t\t\t\temail: item.email,\n\t\t\t\t\t\tname: fullName,\n\t\t\t\t\t\tleader: item.role < 7 ? true : false,\n\t\t\t\t\t\tmember: item.role > 7 ? true : false,\n\t\t\t\t\t\t..._scores\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\n\t\t\treturn null\n\t\t})\n\t\tsetEmployeeList(_EmpListing)\n\n\t}, [get_employees, teamId, debriefSchedule, wordList, debriefResponses]);\n\n\tuseEffect(() => {\n\t\t// debriefSchedule?.include_members\n\t\tsetShowMemberData(debriefSchedule?.include_members)\n\t\tsetShowLeaderData(debriefSchedule?.include_leaders)\n\n\t\t// setAllowMemberData(debriefSchedule?.include_members)\n\t\t// setAllowLeaderData(debriefSchedule?.include_leaders)\n\t\t// const [allowMemberData, setAllowMemberData] = useState(false)\n\t\t// const [allowLeaderData, setAllowLeaderData] = useState(false)\n\t}, [debriefSchedule]);\n\n\tuseEffect(() => {\n\t\tlet _EmpDisList = []\n\t\tif (showMemberData) {\n\t\t\t_EmpDisList = employeeList.filter(el =>\n\t\t\t\tel.member === showMemberData\n\t\t\t).map((item) => {\n\t\t\t\treturn item\n\t\t\t})\n\t\t}\n\t\tlet _LeadDisList = []\n\t\tif (showLeaderData) {\n\t\t\t_LeadDisList = employeeList.filter(el =>\n\t\t\t\tel.leader === showLeaderData\n\t\t\t).map((item) => {\n\t\t\t\treturn item\n\t\t\t})\n\t\t}\n\n\t\tconst _CombinedList = [..._EmpDisList, ..._LeadDisList]\n\t\tsetDispEmpList(_CombinedList.sort(function (a, b) {\n\t\t\treturn b['Average'] - a['Average']\n\t\t}))\n\t}, [employeeList, wordList, showMemberData, showLeaderData]);\n\n\tuseEffect(() => {\n\t\tconst TotalScoreList = {}\n\t\tconst TotalScoreNos = {}\n\t\tconst TotalPrevScoreList = {}\n\t\tconst TotalPrevScoreNos = {}\n\n\t\tif (showLeaderData && !showMemberData ) {\n\t\t\t// console.log(\"showLeaderData found\")\n\t\t\tsetShowMemberData(false)\n\t\t\twordList.map(wl => {\n\t\t\t\t// console.log(debriefSchedule?.summary?.current_leaders?.[wl])\n\t\t\t\tTotalScoreList[wl] = debriefSchedule?.summary?.current_leaders?.[wl]\n\t\t\t\tTotalScoreNos[wl] = debriefSchedule?.summary?.current_leaders?.nos\n\t\t\t\tTotalPrevScoreList[wl] = debriefSchedule?.summary?.previous_leaders?.[wl]\n\t\t\t\tTotalPrevScoreNos[wl] = debriefSchedule?.summary?.previous_leaders?.nos\n\t\t\t\treturn null\n\t\t\t})\n\t\t}\n\n\t\tif (!showLeaderData && showMemberData ) {\n\t\t\t// console.log(\"showMemberData found\")\n\t\t\tsetShowLeaderData(false)\n\t\t\twordList.map(wl => {\n\t\t\t\t// console.log(debriefSchedule?.summary?.current_members?.[wl])\n\t\t\t\tTotalScoreList[wl] = debriefSchedule?.summary?.current_members?.[wl]\n\t\t\t\tTotalScoreNos[wl] = debriefSchedule?.summary?.current_members?.nos\n\t\t\t\tTotalPrevScoreList[wl] = debriefSchedule?.summary?.previous_members?.[wl]\n\t\t\t\tTotalPrevScoreNos[wl] = debriefSchedule?.summary?.previous_members?.nos\n\t\t\t\treturn null\n\t\t\t})\n\t\t}\n\n\t\tif (showLeaderData && showMemberData) {\n\t\t\t// console.log(\"Both found\")\n\t\t\twordList.map(wl => {\n\t\t\t\t// console.log(debriefSchedule?.summary?.current_members?.[wl])\n\t\t\t\tTotalScoreList[wl] = debriefSchedule?.summary?.current_all?.[wl]\n\t\t\t\tTotalScoreNos[wl] = debriefSchedule?.summary?.current_all?.nos\n\t\t\t\tTotalPrevScoreList[wl] = debriefSchedule?.summary?.previous_all?.[wl]\n\t\t\t\tTotalPrevScoreNos[wl] = debriefSchedule?.summary?.previous_all?.nos\n\t\t\t\treturn null\n\t\t\t})\n\t\t}\n\n\t\tconst CurrentList = {}\n\t\tconst PreviousList = {}\n\n\t\tObject.entries(TotalScoreList).map(([key, value]) => {\n\t\t\t// console.log(key, value)\n\t\t\treturn (\n\t\t\t\tCurrentList[key] = Math.round(value / TotalScoreNos[key])\n\t\t\t);\n\t\t})\n\n\t\tObject.entries(TotalPrevScoreList).map(([key, value]) => {\n\t\t\t// console.log(key, value)\n\t\t\treturn (\n\t\t\t\tPreviousList[key] = Math.round(value / TotalPrevScoreNos[key])\n\t\t\t);\n\t\t})\n\n\t\t// FinalList['Average'] = TotalScore > 0 ? Math.round(TotalScore / TotalNos) : 0\n\t\t// console.log(TotalScoreList)\n\t\t// console.log(TotalPrevScoreList)\n\t\t// console.log(CurrentList)\n\t\t// console.log(PreviousList)\n\t\t// console.log(debriefSchedule)\n\n\t\tif (CurrentList?.Cohesion) {\n\t\t\tlet _series = wordList.map((item) => {\n\t\t\t\treturn CurrentList[item]\n\t\t\t})\n\n\t\t\tlet _series2 = wordList.map((item) => {\n\t\t\t\treturn PreviousList[item] ? PreviousList[item] : 0\n\t\t\t})\n\n\t\t\tsetSeriesChartData([{ \"name\": 'Scores', data: _series }, { \"name\": 'Average', data: _series2 }])\n\t\t} else {\n\t\t\tsetSeriesChartData(null)\n\t\t}\n\n\t}, [wordList, debriefSchedule, showMemberData, showLeaderData]);\n\n\t// console.log(seriesChartData)\n\t// console.log(showLeaderData)\n\t// console.log(showMemberData)\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tPerformance Debrief \n\t\t\t\t\n\t\t\t\t\t debriefSchedule?.include_members && setShowMemberData(!showMemberData)}\n\t\t\t\t\t\tstyle={{ marginRight: 10 }}\n\t\t\t\t\t/>\n\t\t\t\t\t \n\t\t\t\t\t\t\tdebriefSchedule?.include_leaders && setShowLeaderData(!showLeaderData)}\n\t\t\t\t\t/>\n\t\t\t\t \n\t\t\t \n\t\t\t\n\t\t\t\t\n\t\t\t\t\tLoading \n\t\t\t\t \n\t\t\t\t{loading ? \" \" :\n\t\t\t\t\t\n\t\t\t\t\t\t{seriesChartData ?\n\t\t\t\t\t\t\t }\n\t\t\t \n\n\t\t\t\n\n\t\t\t\t
\n\t\t \n\t)\n}\n\n\n\nexport default Game\n\n\nconst SortArrow = ({ dir, show }) => {\n\n\treturn (\n\t\t\n\t\t\t 0 ? 'chevron down' : 'chevron up'} style={{ marginTop: -6 }} />\n\t\t \n\t)\n}\n\nconst Container = styled.div`\n\tfont-family: 'Red Hat Display', sans-serif;\n\tmargin-bottom:50px;\n`\n\nconst SortContainer = styled.div`\n\t\tdisplay:${props => props.show ? 'flex' : 'none'};\n\t\tmargin-left:5px;\n`\n\nconst Top = styled.div`\n\theight:70px;\n\tmargin-top:10px;\n\tborder-bottom:1px solid #ebebeb;\n\twidth:65%;\n\tdisplay:flex;\n\talign-items:center;\n\tpadding:10px;\n\tposition:relative;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-right:20px;\n`\nconst CheckContainer = styled.div`\n\tposition:absolute;\n\tright:0;\n`\n\nconst Table = styled.div`\n\twidth:100%;\n\tpadding:0px 50px;\n`\nconst TR = styled.div`\n\twidth:100%;\n\theight:35px;\n\tdisplay:flex;\n\tborder-top:1px solid black;\n\tborder-bottom:1px solid black;\n\t\n`\n\nconst TH = styled.div`\n\tcolor:white;\n\tbackground-color:#3078ff;\n\twidth:${props => props.width + '%'};\n\tdisplay:flex;\n\talign-items:center;\n\tpadding:3px 6px;\n\tfont-weight:bold;\n\tborder-right:${props => props.borderRight ? '1px solid black' : 'none'};\n\tborder-left:${props => props.borderLeft ? '1px solid black' : 'none'};\n\tjustify-content:${props => props.center ? 'center' : 'flex-start'};\n\tcursor:${props => props.click ? 'pointer' : 'auto'};\n\t user-select: none;\n`\n\nconst SummaryCards = styled.div`\n\tpadding:50px;\n\tmin-height:450px;\n`\n\nconst Avatar = styled.img`\n\twidth:20px;\n\theight:20px;\n\tborder-radius:10px;\n\tmargin-right:5px;\n`\n\nconst Name = styled.div`\n\t\n`\n\nconst TD = styled.div`\n\twidth:${props => props.width + '%'};\n\tdisplay:flex;\n\talign-items:center;\n\tpadding:3px 6px;\n\tborder-right:${props => props.borderRight ? '1px solid black' : 'none'};\n\tborder-left:${props => props.borderLeft ? '1px solid black' : 'none'};\n`\n\nconst TD2 = styled.div`\n\twidth:${props => props.width + '%'};\n\tdisplay:flex;\n\talign-items:center;\n\tpadding:3px 6px;\n\tborder-right:${props => props.borderRight ? '1px solid black' : 'none'};\n\tborder-left:${props => props.borderLeft ? '1px solid black' : 'none'};\n\tjustify-content:center;\n\tfont-weight:${props => props.bold ? 'bold' : 400};\n\tbackground-color:${props => props.score ? 'rgba(48, 120, 255,' + props.score / 100 + ')' : 'white'};\n`\n\nconst SumCard = styled.div`\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\twidth:350px;\n\theight:200px;\n\tdisplay:flex;\n\tmargin-bottom:10px;\n\tpadding:30px;\n`\n\nconst TypeName = styled.div`\n\tfont-size:22px;\n\tfont-weight:bold;\n\tmargin-bottom:15px;\n`\n\nconst Description = styled.div`\n\tcolor:#757575;\n`\n\nconst Area1 = styled.div`\n\twidth:50%;\n\n`\n\nconst Score = styled.div`\n\twidth:50%;\n\theight:100%;\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n\tfont-size:40px;\n\tfont-weight:bold;\n`\n\nconst questions = ['We sustained our best all the way through this performance, from start to finish.',\n\t'We met the most difficult moments of this performance with calmness, clarity, and control.',\n\t'I expected us to be successful going into this performance - I believed in our ability to meet the task.',\n\t'We brought our full effort and energy to this performance - we played with purpose, passion, and never gave up.',\n\t'The interactions I had with my teammates during this performance energized and empowered me to be my best.']\n\nconst data3 = {\n\n\toptions: {\n\t\tchart: {\n\t\t\ttype: 'line',\n\t\t\twidth: '100%',\n\t\t\ttoolbar: {\n\t\t\t\tshow: false\n\t\t\t},\n\t\t\tsparkline: {\n\t\t\t\tenabled: false,\n\t\t\t}\n\t\t},\n\t\tlegend: {\n\t\t\tposition: 'top',\n\t\t\thorizontalAlign: 'left'\n\t\t},\n\t\tcolors: ['rgba(201, 124, 12,0.6)', '#b5b5b5'],\n\t\tfill: {\n\t\t\ttype: ['solid', 'pattern'],\n\t\t\topacity: 0.6,\n\t\t\tpattern: {\n\t\t\t\tstyle: ['verticalLines', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings\n\n\t\t\t}\n\t\t},\n\t\tgrid: {\n\t\t\tpadding: {\n\t\t\t\tleft: 10,\n\t\t\t\tright: 10,\n\t\t\t\tbottom: 20,\n\t\t\t\ttop: 10\n\t\t\t}\n\t\t},\n\t\tdataLabels: {\n\t\t\tenabled: true,\n\t\t\tstyle: {\n\t\t\t\tcolors: ['white', 'black']\n\t\t\t}\n\n\t\t},\n\t\tstroke: {\n\t\t\tcurve: \"smooth\"\n\t\t},\n\t\txaxis: {\n\t\t\tcategories: factors,\n\t\t},\n\t\tyaxis: {\n\t\t\ttitle: {\n\t\t\t\ttext: 'Score'\n\t\t\t},\n\t\t\tmin: 0,\n\t\t\tmax: 100,\n\t\t\tdecimalsInFloat: 0,\n\t\t}\n\t}\n}\n\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\n\nimport { Button, Icon, Confirm } from 'semantic-ui-react'\n\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport {\n SG_GET_DEBRIEF_RESPONSES,\n SG_FETCH_DEBRIEF_SCHEDULE,\n SG_FETCH_SURVEY_QUESTION,\n} from \"constants/actions\";\n\nimport format from \"date-fns/format\";\n\nimport PracticeReport from \"debriefs/report/practice\"\nimport PerformanceReport from \"debriefs/report/performance\"\n\n\nconst DebriefScheduleDetail = ({\n showReportId, setShowReportId }) => {\n const dispatch = useDispatch();\n\n const [debriefSchedule, setDebriefSchedule] = useState([]);\n const [debriefResponses, setDebriefResponses] = useState([]);\n const [debriefQuestionId, setDebriefQuestionId] = useState([]);\n // const [teamId, setTeamId] = useState([]);\n\n const {\n get_debrief_responses, get_debrief_schedules,\n get_survey_question, get_employees } = useSelector(\n (state) => ({\n get_debrief_responses: state.debrief_response,\n get_debrief_schedules: state.debrief_schedule,\n get_survey_question: state.surveyquestions,\n get_employees: state.employees.employees\n }),\n shallowEqual\n );\n\n useEffect(() => {\n if (showReportId) {\n dispatch({\n type: SG_FETCH_DEBRIEF_SCHEDULE,\n payload: { id: showReportId }\n })\n dispatch({\n type: SG_GET_DEBRIEF_RESPONSES,\n payload: `debrief_schedule=${showReportId}`\n })\n }\n }, [dispatch, showReportId]);\n\n useEffect(() => {\n if (debriefQuestionId > 0) {\n dispatch({\n type: SG_FETCH_SURVEY_QUESTION,\n payload: { id: debriefQuestionId }\n })\n }\n }, [dispatch, debriefQuestionId]);\n\n useEffect(() => {\n setDebriefSchedule(get_debrief_schedules?.[showReportId])\n setDebriefQuestionId(get_debrief_schedules?.[showReportId]?.brief_question)\n }, [showReportId, get_debrief_schedules]);\n\n useEffect(() => {\n setDebriefResponses(get_debrief_responses?.debrief_response)\n }, [get_debrief_responses]);\n\n // useEffect(() => {\n\n // }, [get_survey_question, debriefQuestionId]);\n\n // console.log(debriefResponses)\n\n return (\n <>\n \n\n \n \n \n {debriefSchedule?.status > 2 ?\n <>\n {debriefSchedule?.type_of === 1 &&\n \n The Survey has not yet gone out!\n \n \n You will start seeing data once the survey becomes live.\n \n \n }\n \n );\n};\n\nexport default DebriefScheduleDetail;\n\nconst Headers = styled.div`\n font-family: 'Red Hat Display', sans-serif;\n font-weight:bold;\n font-size:28px;\n margin-top:40px;\n margin-bottom: 20px;\n`;\n\nconst CenterMessage = styled.div`\n text-align: center;\n font-family: 'Red Hat Display', sans-serif;\n font-weight:bold;\n font-size:28px;\n margin-top:100px;\n margin-bottom: 20px;\n`;\nconst InfoCentered = styled.div`\n text-align: center;\n font-family: 'Red Hat Display', sans-serif;\n font-size:20px;\n margin-bottom: 25px;\n`\n\nconst Org = styled.div`\n font-family: 'Red Hat Display', sans-serif;\n font-size:22px;\n font-weight:bold;\n margin-bottom: 25px;\n`\nconst Information = styled.div`\n font-family: 'Red Hat Display', sans-serif;\n font-size:20px;\n margin-bottom: 25px;\n\n`\n\nconst Table = styled.div`\n\tmargin-top:30px;\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\tpadding:20px;\n`\n\nconst TR = styled.div`\n\tdisplay:flex;\n\tpadding:15px 10px;\n\twidth:100%;\n`\n\nconst TH = styled.div`\n\twidth:${props => props.width + '%'};\n\tfont-weight:bold;\n\tborder-bottom:1px solid #9b9b9b;\n\tpadding-bottom:5px;\n`\n\nconst TD = styled.div`\n\twidth:${props => props.width + '%'};\n\tdisplay:flex;\n\talign-items:center;\n\tposition:relative;\n`\n\nconst T1 = styled.div`\n\tfont-weight:500;\n\tfont-size:18px;\n`\n\nconst SmallImg = styled.img`\n\twidth:30px;\n\tmargin-right:10px;\n`\n\n\n\nconst View = styled.div`\n\tpadding:5px 35px;\n\tbackground-color:#6a00ff;\n\tcolor:white;\n\tborder-radius:20px;\n\tfont-weight:bold;\n\tposition:absolute;\n\tright:0;\n\tcursor:pointer;\n`\n\nconst Card = styled.div`\n max-width:100%;\n padding:30px;\n margin-bottom:10px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n// position:relative;\n display:flex;\n justify-content:space-between;\n// align-items:center;\n\n`\n\nconst TopContainer = styled.div`\n display:flex;\n width:100%;\n align-items:center;\n justify-content:space-between;\n`","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\n\nimport Pic1 from 'assets/images/performance.png'\nimport Pic2 from 'assets/images/google-docs.png'\nimport { Button, Icon, Modal } from 'semantic-ui-react'\n\nconst TypesOfBriefs = [\n\t{\n\t\tid: 1,\n\t\tname: 'Performance',\n\t\tdescribe: \"Your home for tracking performance debrief data\",\n\t\tlearnMore: \"link goes here\",\n\t\timage: Pic1,\n\t\t'description': \"Participants are asked to score the team's efforts in the 5 C's (Consistency, Composure,Confidence,Compete,Cohesion)\",\n\t\tquestions: ['We sustained our best all the way through this performance, from start to finish.',\n\t\t\t'We met the most difficult moments of this performance with calmness, clarity, and control.',\n\t\t\t'I expected us to be successful going into this performance - I believed in our ability to meet the task.',\n\t\t\t'We brought our full effort and energy to this performance - we played with purpose, passion, and never gave up.',\n\t\t\t'The interactions I had with my teammates during this performance energized and empowered me to be my best.']\n\t},\n\t{\n\t\tid: 2,\n\t\tname: 'Training',\n\t\tdescribe: \"Your home for tracking training debrief data\",\n\t\tlearnMore: \"link goes here\",\n\t\timage: Pic2,\n\t\tdescription: \"Participants are asked to reflect on takeaways from the most recent training session, as well as rate their response to a difficult challenge\",\n\t\tquestions: ['The three biggest takeaways or sticking points for me today were…', 'The most difficult challenge or moment I faced today was', 'I would rate my response to this challenge as.', 'Based on today’s session, one thing I would like to improve is..']\n\t}\n]\n\n\n\nconst DebriefTypes = () => {\n\n\treturn (\n\t\t\n\t\t\t{TypesOfBriefs.map((brief, i) => {\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t)\n\t\t\t})}\n\t\t \n\n\t)\n}\n\n\nexport default DebriefTypes\n\n\nfunction DebriefInformation(props) {\n const [open, setOpen] = React.useState(false)\n\n return (\n setOpen(false)}\n onOpen={() => setOpen(true)}\n open={open}\n closeIcon\n trigger={props.trigger}\n >\n {props.data.name} Questions \n \n \t\n \t{props.data.description} \n\n \tQuestions Asked \n \t \n\n \n )\n}\n\n\nconst Types = styled.div`\n\twidth:100%;\n\tdisplay:flex;\n`\n\nconst TypeContainer = styled.div`\n\twidth:400px;\n\tmargin-right:30px;\n\tmargin-top:20px;\n\tbox-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\tdisplay:flex;\n\tpadding:30px;\n cursor: pointer;\n`\nconst TypeName = styled.div`\n\tfont-size:22px;\n\tfont-weight:bold;\n\tmargin-bottom:15px;\n`\n\nconst Description = styled.div`\n\tcolor:#757575;\n`\n\nconst Image = styled.img`\n\twidth:100px;\n`\n\nconst See = styled.div`\n\tmargin-top:10px;\n\tcolor:#6a00ff;\n`\nconst Title = styled.div`\n\tfont-weight:bold;\n\tfont-size:16px;\n\tmargin-bottom:20px;\n\tmargin-top:30px;\n`\n\nconst ModalContainer = styled.div`\n\tpadding:20px;\n`\n\nconst Li = styled.li`\n\tfont-size:14px;\n\tmargin-bottom:10px;\n`","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector, shallowEqual } from \"react-redux\";\nimport { Message } from 'semantic-ui-react'\n\nimport Select from \"react-select\";\n\nimport AddNew from \"debriefs/AddNew\"\nimport List from \"debriefs/List\"\nimport Details from \"debriefs/Details\"\nimport DebriefType from './Types'\n\n\nimport {\n\tLOAD_TEAMS,\n\tPULL_ORGANIZATION,\n\tSG_GET_TEAM_ACCESSS,\n\tCLEAR_ERRORS,\n} from \"constants/actions\";\n\nconst Debriefs = () => {\n\tconst dispatch = useDispatch();\n\tconst [organizationId, setOrganizationId] = useState(false);\n\tconst [teamList, setTeamList] = useState([])\n\tconst [selectedTeam, setSelectedTeam] = useState([])\n\tconst [employee, setEmployee] = React.useState(false)\n\n\tconst [showReportId, setShowReportId] = useState(false);\n\tconst [showErrors, setShowErrors] = React.useState(false);\n\tconst [fetchAgain, setFetchAgain] = useState(0);\n\tconst [deletedRecord, setDeletedRecord] = useState(0);\n\tconst [createEdit, setCreateEdit] = useState(0)\n\n\tconst EmployeeId = useSelector((state) => Number(state.auth?.employee_id), shallowEqual)\n\tconst AmbassadorId = useSelector((state) => Number(state.auth?.ambassador_id), shallowEqual)\n\n\tconst { get_auth, get_teams, get_selectedOrg,\n\t\tget_team_access, get_employee,\n\t\tget_errors } = useSelector(\n\t\t\t(state) => ({\n\t\t\t\tget_errors: state.errors,\n\t\t\t\tget_auth: state.auth,\n\t\t\t\tget_employee: state.employees,\n\t\t\t\tget_teams: state.teams.teams,\n\t\t\t\tget_selectedOrg: state.selectedOrg,\n\t\t\t\tget_team_access: state.team_access.team_access\n\t\t\t}),\n\t\t\tshallowEqual\n\t\t);\n\n\tuseEffect(() => {\n\t\t// Run! Like go get some data from an API.\n\t\t// dispatch({ type: SG_GET_MOODS });\n\t\tif (Number(AmbassadorId) > 0) {\n\t\t\tif (organizationId) {\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: LOAD_TEAMS,\n\t\t\t\t\tpayload: `organization=${organizationId}`\n\t\t\t\t});\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: PULL_ORGANIZATION,\n\t\t\t\t\tpayload: { id: organizationId }\n\t\t\t\t})\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: SG_GET_TEAM_ACCESSS,\n\t\t\t\t\tpayload: `organization=${organizationId}`\n\t\t\t\t});\n\t\t\t\treturn\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tdispatch({ type: LOAD_TEAMS });\n\t\t\tif (Number(EmployeeId) > 0) {\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: SG_GET_TEAM_ACCESSS,\n\t\t\t\t\tpayload: `employee=${EmployeeId}`\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn\n\t\t}\n\t}, [dispatch, AmbassadorId, organizationId, EmployeeId]);\n\n\tuseEffect(() => {\n\t\tif (Number(AmbassadorId) > 0) {\n\t\t\tsetOrganizationId(get_selectedOrg?.organization?.id)\n\t\t} else {\n\t\t\tsetOrganizationId(Number(get_auth.organization_id))\n\t\t}\n\t}, [get_selectedOrg, AmbassadorId, get_auth]);\n\n\tuseEffect(() => {\n\t\tsetEmployee(get_employee[EmployeeId])\n\t\tif (get_employee[EmployeeId]?.account_type === 5) {\n\t\t\tsetCreateEdit(true)\n\t\t\treturn\n\t\t}\n\n\t\tif (get_employee[EmployeeId]?.role < 7) {\n\t\t\tsetCreateEdit(true)\n\t\t\treturn\n\t\t}\n\t\tsetCreateEdit(false)\n\t}, [get_employee, EmployeeId]);\n\n\tuseEffect(() => {\n\t\tif (Number(AmbassadorId) > 0) {\n\t\t\tsetTeamList(get_teams)\n\t\t\treturn\n\t\t}\n\t\tif (employee) {\n\t\t\tif (employee?.account_type === 5) {\n\t\t\t\tsetTeamList(get_teams)\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst _TeamList = []\n\t\t\t_TeamList.push(\n\t\t\t\tget_teams.filter(\n\t\t\t\t\ttm => tm.id === employee?.team)[0]\n\n\t\t\t)\n\t\t\tget_team_access.map(tm =>\n\t\t\t\t_TeamList.push(get_teams.filter(\n\t\t\t\t\tgt => gt.id === tm?.team)[0]\n\t\t\t\t)\n\t\t\t)\n\t\t\tsetTeamList(_TeamList)\n\t\t\treturn\n\t\t}\n\t}, [get_teams, employee, AmbassadorId, get_team_access]);\n\n\tfunction UpdateSelectedTeam(e) {\n\t\tsetSelectedTeam(e)\n\t}\n\tuseEffect(() => {\n\t\tif (get_errors?.status === 403) {\n\t\t\tsetShowErrors(get_errors?.data?.detail)\n\t\t}\n\t}, [get_errors]);\n\n\tfunction clearErrors() {\n\t\tdispatch({\n\t\t\ttype: CLEAR_ERRORS\n\t\t})\n\t\tsetShowErrors(false)\n\t}\n\n\treturn (\n\t\t\n\t\t\t{showErrors &&\n\t\t\t\t\n\t\t\t}\n\t\t\t{showReportId ?\n\t\t\t\tDebriefs \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t option.name}\n\t\t\t\t\t\t\t\tgetOptionValue={(option) => option.id}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t \n\n\t\t\t\t\t\t{/* Add New Modals */}\n\t\t\t\t\t\t{createEdit &&\n\t\t\t\t\t\t\t \n\n\t\t\t\t\t{/* Select Debrief Type */}\n\t\t\t\t\t \n\t)\n}\n\n\nexport default Debriefs\n\n\nconst Container = styled.div`\n\tmargin-top:50px;\n\tfont-family: 'Red Hat Display', sans-serif;\n`\n\nconst Title = styled.div`\n\t\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-right:20px;\n\t\n`\nconst WideSelectCont = styled.div`\nwidth:200px;\n`\nconst DropContainer = styled.div`\n\tmargin-top:20px;\n\tdisplay:flex;\n justify-content:space-between;\n`\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { Button } from \"semantic-ui-react\";\nimport {\n Title2,\n P2,\n SettingsCard,\n View,\n Container,\n} from \"../styled_list\";\n\nimport { SG_ADD_SURVEY_COMPLIANCE } from \"constants/actions\";\nimport styled, { keyframes } from \"styled-components\";\n\nconst SurveyTypes = [1, 2]; // Culture and Mood Survey type\n\nconst StartIntelligence = (props) => {\n const { globalSchedule, setProcessing, setFirstTime,\n OpenPortal } = props;\n const dispatch = useDispatch();\n\n\n function startSurveyCompliance() {\n SurveyTypes.map((survey_type) =>\n dispatch({\n type: SG_ADD_SURVEY_COMPLIANCE,\n payload: {\n active: true,\n global_schedule: globalSchedule.id,\n survey_type: survey_type,\n frequency: 1,\n day: globalSchedule.day,\n hour: globalSchedule.hour,\n minute: 0,\n organization: globalSchedule.organization,\n },\n })\n );\n\n setProcessing(true);\n setFirstTime(true)\n OpenPortal(2)\n }\n\n return (\n <>\n \n \n \n \n\n \n \n startSurveyCompliance()}>\n Setup Survey\n \n \n
\n \n \n \n );\n};\n\nexport default StartIntelligence;\n\n\nconst StyledButton = styled.div`\n padding: 15px;\n height: 45px;\n border-radius: 8px;\n background-color: #6a00ff;\n color: white;\n font-size: 16px;\n font-weight: bold;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n","import React from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport { Button } from \"semantic-ui-react\";\n\nimport {\n SG_DELETE_SURVEY_COMPLIANCE,\n SG_ADD_SURVEY_COMPLIANCE,\n} from \"constants/actions\";\n\nimport { format, formatDistance } from \"date-fns\";\nimport getISODay from \"date-fns/getISODay\";\n\nconst DayOfWeek = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nconst SurveyTypes = [1, 2]; // Culture and Mood Survey type\n\nconst Intelligence = (props) => {\n const { intelligence, organizationId, globalSchedule } = props;\n const dispatch = useDispatch();\n // console.log(props);\n // console.log(intelligence);\n // console.log(organizationId);\n // console.log(globalSchedule);\n\n function stopSurveyCompliance() {\n intelligence.map((survey_compliance) =>\n dispatch({\n type: SG_DELETE_SURVEY_COMPLIANCE,\n payload: {\n id: survey_compliance.id,\n },\n })\n );\n }\n\n function startSurveyCompliance() {\n SurveyTypes.map((survey_type) =>\n dispatch({\n type: SG_ADD_SURVEY_COMPLIANCE,\n payload: {\n active: true,\n global_schedule: globalSchedule.id,\n survey_type: survey_type,\n frequency: 1,\n day: globalSchedule.day,\n hour: globalSchedule.hour,\n minute: 0,\n organization: organizationId,\n },\n })\n );\n \n }\n\n // List of teams in mood 2 and culture 1\n // console.log(globalSchedule)\n return (\n | \n\t\t\t\t\t\tMember\n\t\t\t\t\t | \n\t\t\t\t\t sort('Average')}>\n\t\t\t\t\t\tOverall | \n\t\t\t\t\t sort('Consistency')}>\n\t\t\t\t\t\tConsistency | \n\t\t\t\t\t sort('Composure')}>\n\t\t\t\t\t\tComposure | \n\t\t\t\t\t sort('Confidence')}>\n\t\t\t\t\t\tConfidence | \n\t\t\t\t\t sort('Compete')}>\n\t\t\t\t\t\tCompete | \n\t\t\t\t\t sort('Cohesion')}>\n\t\t\t\t\t\tCohesion | \n\t\t\t\t
|---|
\n \n {/* Details of {debriefSchedule?.type_of_text} \n With Team {debriefSchedule?.team_name} */}\n
\n \n {debriefSchedule?.scheduled_for &&\n \n Scheduled On: {format(\n new Date(debriefSchedule?.scheduled_for?.toLocaleString()),\n \"EEEE, MMM do\"\n )}\n \n }\n {/* {debriefSchedule?.close_at &&\n \n Between:{\" \"}\n {format(\n new Date(debriefSchedule?.scheduled_for?.toLocaleString()),\n \"h:mm a\"\n )}\n {` and `} {format(\n new Date(debriefSchedule?.close_at?.toLocaleString()),\n \"h:mm a\"\n )}\n \n }\n \n {debriefSchedule?.status_text}\n \n Members Included {debriefSchedule?.include_members ? \"Yes\" : \"No\"} \n Leaders Included {debriefSchedule?.include_leaders ? \"Yes\" : \"No\"} */}\n
\n\n\n \n\t\t\t\t\t\t\t{brief?.name} \n\t\t\t\t\t\t\t{brief?.describe} \n\t\t\t\t\t\t\tLearn more} data={brief} />\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t- \n \t{props.data.questions.map((item, i)=>
- {item} )}\n \t
\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t
\n Activate team intelligence survey \n \n Track and support your team(s) using\n evidence-based team & emotional health metrics.\n \n
\n \n \n {globalSchedule && (\n <>\n {intelligence.length > 0 && (\n \n \n {intelligence.length > 0 && (\n \n )}\n {/* \n
\n \n )}\n \n \n );\n};\n\nexport default Intelligence;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nimport { useDispatch } from \"react-redux\";\nimport { Icon, Button, Modal } from \"semantic-ui-react\";\nimport { SelectContainer } from \"../styled_list\";\n\nimport { SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY } from \"constants/actions\";\n\nexport const choice = [\n { id: 1, value: 1, text: \"Weekly\" },\n { id: 2, value: 2, text: \"Bi-Weekly\" },\n { id: 3, value: 4, text: \"Monthly\" },\n { id: 4, value: 12, text: \"Quarterly\" },\n];\n\nconst SurveyFrequency = (props) => {\n const { intelligenceFreq, organizationId } = props\n const dispatch = useDispatch();\n const [selectedFreq, setSelectedFreq] = React.useState(1);\n\n React.useEffect(() => {\n if (intelligenceFreq[0]?.frequency) {\n setSelectedFreq(\n choice.filter((fl) => fl.value === intelligenceFreq[0].frequency)[0].id\n );\n }\n }, [intelligenceFreq]);\n\n function MoveUp() {\n // () => UpdateActiveStatus(selectedFreq + 1)\n let newFreq = selectedFreq + 1 > 4 ? 4 : selectedFreq + 1;\n setSelectedFreq(newFreq);\n UpdateActiveStatus(newFreq);\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n // UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n function MoveDown() {\n let newFreq = selectedFreq - 1 < 1 ? 1 : selectedFreq - 1;\n setSelectedFreq(newFreq);\n UpdateActiveStatus(newFreq);\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n // UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n \n // console.log(props)\n // console.log(intelligenceFreq)\n\n function UpdateActiveStatus(newFreq) {\n // console.log(newFreq)\n\n intelligenceFreq.map(freq => \n dispatch({\n type: SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY,\n payload: {\n id: freq.id,\n frequency: choice.filter((fl) => fl.id === newFreq)[0].value,\n organization: organizationId,\n },\n })\n )\n }\n\n return (\n <>\n \n Your next survey scheduled at{\" \"}\n {` ${\n intelligence[0]?.scheduled_at &&\n format(new Date(intelligence[0]?.scheduled_at), \"dd MMM yyyy\")\n }\n ${DayOfWeek[getISODay(new Date(intelligence[0]?.scheduled_at)) - 1]}\n ${format(new Date(intelligence[0]?.scheduled_at), \"h\")}:00 \n ${format(new Date(intelligence[0]?.scheduled_at), \"aaa\")}\n ${formatDistance((new Date(intelligence[0]?.scheduled_at)), new Date(), { addSuffix: true })}`}\n
\n )}\n\n\n option.text}\n getOptionValue={(option) => option.key}\n />\n
\n );\n};\n\nexport default SurveyDate;\n\nexport const ContainerCard = styled.div`\n height: 75px;\n width: 100%;\n border-radius: 10px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n margin-bottom: 24px;\n`;\n","import React, { useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport DatePicker from \"react-datepicker\";\nimport {\n SG_EDIT_GLOBAL_SCHEDULE,\n SG_ADD_GLOBAL_SCHEDULE,\n SG_GET_SURVEY_COMPLIANCES,\n} from \"constants/actions\";\nimport { SelectDate } from \"../Settings\";\nimport { Icon } from \"semantic-ui-react\";\nimport { SelectContainer } from \"../styled_list\";\nimport \"../style.css\";\n\nconst DayOfWeek = [\n { value: 0, text: \"Monday\" },\n { value: 1, text: \"Tuesday\" },\n { value: 2, text: \"Wednesday\" },\n { value: 3, text: \"Thursday\" },\n { value: 4, text: \"Friday\" },\n { value: 5, text: \"Saturday\" },\n { value: 6, text: \"Sunday\" },\n];\n\nexport const SelectWeekDay = ({ \n \n selectedDay, MoveUp, MoveDown }) => {\n // console.log('selectedDay', selectedDay, \" -----\", DayOfWeek[selectedDay])\n\n return (\n \n Close in Hrs \n \n UpdateCloseHrs(e)}\n value={CloseHrs}\n options={totalHours}\n />\n
\n );\n}\n\nexport default UpdatingCloseHrs;\n","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\n\nimport { Icon } from \"semantic-ui-react\";\n\nimport { Participants, Oval, P3 } from \"../styled_list\";\nimport { Message } from \"semantic-ui-react\";\nimport {\n SG_ADD_TEAMS_IN_SCHEDULE,\n SG_DELETE_TEAMS_IN_SCHEDULE,\n} from \"constants/actions\";\n\nexport const Selector = (props) => {\n return (\n No Teams found!
}\n\n Update Time zone \n\n UpdateTimezone(e)}\n value={timeZone}\n options={SortedTimezone()}\n />\n
\n\n );\n}\n\nexport default UpdateTimeZone;\n","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch, shallowEqual } from \"react-redux\";\n\nimport Personality from \"assets/images/nav/personality.svg\";\nimport { Link } from \"react-router-dom\";\n// import ModalLeader from \"./ModalLeaderTeams\";\n// import LeaderList from \"./LeaderList\";\n\nimport {\n SG_GET_GLOBAL_SCHEDULES,\n PULL_ORGANIZATION,\n SG_GET_GLOBAL_SCHEDULE_FREQUENCIES,\n\n} from \"constants/actions\";\n\nimport {\n Warning,\n Title,\n Title2,\n Title3,\n P,\n P2,\n Line,\n Line2,\n SettingsCard,\n Img,\n View,\n Button,\n Container,\n} from \"./styled_list\";\n\n\n\nconst SurveySettings = ({organizationalId, setProcessing }) => {\n const dispatch = useDispatch();\n const [globalSchedule, setGlobalSchedule] = useState([]);\n\n const organization_id = useSelector((state) => state.auth.organization_id);\n const [organization, setOrganization] = React.useState(\"\");\n const [organizationId, setOrganizationId] = useState(null);\n\n React.useEffect(() => {\n // if the response is ok 200\n if (organization_id) {\n dispatch({\n type: PULL_ORGANIZATION,\n payload: { id: organizationalId? organizationalId : organization_id },\n });\n }\n }, [organization_id, organizationalId, dispatch]);\n\n const { get_organization } = useSelector(\n (state) => ({\n get_organization: state.organizations,\n }),\n shallowEqual\n );\n\n // useEffect(() => {\n // // if the response is ok 200\n // dispatch({\n // type: SG_GET_GLOBAL_SCHEDULES,\n // });\n\n // }, [dispatch]);\n \n useEffect(() => {\n dispatch({\n type: SG_GET_GLOBAL_SCHEDULES,\n payload: organizationalId ? `organization=${organizationalId}` : ''\n });\n }, [dispatch, organizationalId]);\n\n // useEffect(() => {\n // if (globalSchedule?.id) {\n // dispatch({\n // type: SG_GET_GLOBAL_SCHEDULE_FREQUENCIES,\n // payload: `global-schedule=${globalSchedule.id}`,\n // });\n // }\n // }, [dispatch, globalSchedule]);\n\n useEffect(() => {\n if (get_organization) {\n setOrganization(get_organization[organization_id]);\n }\n }, [get_organization, organization_id]);\n\n const {\n // get_selected_teams,\n get_global_schedules,\n // get_survey_compliances,\n // get_global_schedule_frequencies,\n // get_auth,\n } = useSelector(\n (state) => ({\n // get_selected_teams: state.teamsinschedule.teams_in_schedules,\n get_global_schedules: state.surveyschedule.global_schedules,\n // get_global_schedule_frequencies:\n // state.surveyschedulefrequency.global_schedule_frequencies,\n get_survey_compliances: state.surveycompliance.survey_compliances,\n // get_auth: state.auth,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n // setGlobalSettings(get_global_schedules);\n setOrganizationId(organizationalId? Number(organizationalId) : Number(organization_id));\n setGlobalSchedule(get_global_schedules);\n \n }, [\n get_global_schedules,\n // get_survey_compliances,\n // get_global_schedule_frequencies,\n // get_auth,\n organizationalId,\n organization_id\n ]);\n\n // List of teams in mood 2 and culture 1\n // console.log(globalSchedule)\n return (\n \n Personality Survey Settings \n \n {globalSchedule && (\n \n \n 
\n \n\n \n \n \n \n \n \n
\n \n )}\n \n \n );\n};\n\nexport default SurveySettings;\n","export default __webpack_public_path__ + \"static/media/teamwork.b8f4677e.svg\";","import React from \"react\";\nimport styled from \"styled-components\";\n\nimport moment from \"moment\";\n\nimport { useDispatch } from \"react-redux\";\nimport { Icon, Button, Modal } from \"semantic-ui-react\";\nimport { SelectContainer } from \"./styled_list\";\n\nimport { SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY } from \"constants/actions\";\n\nexport const choice = [\n { id: 1, value: 1, text: \"Weekly\" },\n { id: 2, value: 2, text: \"Bi-Weekly\" },\n { id: 3, value: 4, text: \"Monthly\" },\n { id: 4, value: 12, text: \"Quarterly\" },\n];\n\nconst SurveyFrequency = ({ selected, setProcessing, scheduledAt }) => {\n const dispatch = useDispatch();\n const [selectedFreq, setSelectedFreq] = React.useState(1);\n\n// console.log(selectedFreq);\n\n const [open, setOpen] = React.useState(false);\n\n React.useEffect(() => {\n if (selected?.frequency) {\n setSelectedFreq(\n choice.filter((fl) => fl.value === selected.frequency)[0].id\n );\n }\n }, [selected]);\n\n function MoveUp() {\n // () => UpdateActiveStatus(selectedFreq + 1)\n let newFreq = selectedFreq + 1 > 4 ? 4 : selectedFreq + 1;\n setSelectedFreq(newFreq);\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n // UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n function MoveDown() {\n let newFreq = selectedFreq - 1 < 1 ? 1 : selectedFreq - 1;\n setSelectedFreq(newFreq);\n\n // console.log(choice.filter((fl) => fl.id === newFreq)[0].value)\n // UpdateActiveStatus(choice.filter((fl) => fl.id === newFreq)[0].value);\n }\n\n function UpdateActiveStatus() {\n if (selected?.id) {\n setProcessing(true);\n dispatch({\n type: SG_EDIT_GLOBAL_SCHEDULE_FREQUENCY,\n payload: {\n id: selected.id,\n frequency: choice.filter((fl) => fl.id === selectedFreq)[0].value,\n },\n });\n }\n }\n\n return (\n <>\n Manage Personality Survey Users.
\n\n Personality \n \n Understand yourself, your teams, and your people at a much\n deeper level using a valid and reliable personality\n assessment.\n \n
\n \n Leadership Pulse Settings \n \n {hide && (\n <>\n \n \n 
\n createUpdateSurveyCompliance(leadership, 3)}\n />\n \n \n {/* Manage}\n /> */}\n \n \n \n
\n )}\n \n \n )}\n \n \n );\n};\n\nexport default SurveySettings;\n","import React, { useEffect } from \"react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport styled from \"styled-components\";\nimport { Table } from \"semantic-ui-react\";\n\nimport format from \"date-fns/format\";\nimport { Link } from \"react-router-dom\";\n\nimport {\n SG_GET_SURVEY_COMPLIANCES,\n} from \"constants/actions\";\n\n\nconst SurveyStatus = ({ organizationalId }) => {\n const dispatch = useDispatch();\n // const [activeIndex, setActiveIndex] = React.useState(-1);\n\n // useEffect(() => {\n // dispatch({\n // type: SG_GET_SURVEY_COMPLIANCES,\n // payload: \"limit=30\",\n // });\n // }, [dispatch]);\n\n useEffect(() => {\n dispatch({\n type: SG_GET_SURVEY_COMPLIANCES,\n payload: `limit=30${organizationalId ?\n `&organization=${organizationalId}` : ''}`\n });\n }, [dispatch, organizationalId]);\n\n const { get_survey_compliances } = useSelector(\n (state) => ({\n get_survey_compliances: state.surveycompliance.survey_compliances,\n }),\n shallowEqual\n );\n\n // const handleClick = (e, titleProps) => {\n // const { index } = titleProps;\n // const newIndex = activeIndex === index ? -1 : index;\n\n // setActiveIndex(newIndex);\n // };\n\n // console.log(surveyCompliances);\n return (\n Here is your team survey control centre, comming soon!
\n\n {/*\n Leadership \n \n Track and support your leaders using an evidence-based 360\n leadership pulse.\n \n\n \n {globalSchedule\n ? globalSchedule?.last_sent\n ? `Last Sent date ${moment(\n globalSchedule.last_sent\n ).format(\"DD MMM YYYY - (ddd)\")}`\n : globalSchedule?.starting_from\n ? `Starting From ${moment(\n globalSchedule.starting_from\n ).format(\"DD MMM YYYY - (ddd)\")}`\n : \"\"\n : \"Not active\"}\n\n {leadership && (\n \n {/*\n View Past Surveys> \n }\n />*/}\n
\n \n \n \n\n \n {moment(leadership.scheduled_at).fromNow()}\n \n
\n )}\n \n {/* mn.enabled === true)} />\n {/* \n \n These settings will apply to the team intelligence survey.\n \n \n
*/}\n\n {/* \n Survey In Session \n \n setOpenBtn(true)}\n >\n {scheduled ? \"Scheduled to Close\" : \"Close this survey\"}\n \n \n setOpenBtn(false)}\n onConfirm={() => CloseSurvey(selectedSurvey.id)}\n />\n \n
\n {scheduled && (\n View Survey Responses
\n\n <>\n\n {formErrors.length > 0 && !pristine && (\n \n \n\n setSelectedPrimary(e)}\n value={selectedPrimary}\n isMulti\n options={primaryOptions || primaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n \n {/* {secondaryCategory && (\n \n \n\n setSelectedSecondary(e)}\n value={selectedSecondary}\n isMulti\n options={secondaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n \n )} */}\n\n \n \n \n UpdateTimezone(e)}\n value={timeZone}\n options={SortedTimezone()}\n />\n \n \n \n \n \n \n setEndDate(date)}\n showTimeSelect\n minDate={endDate}\n maxDate={addDays(dateValue, 90)}\n dateFormat=\"MMMM d, yyyy h:mm aa\"\n />\n \n\n {/* \n \n \n\n setSelectedNoOfHours(e)}\n value={selectedNoOfHours}\n options={HoursList}\n />\n */}\n \n \n {/* */}\n\n setSurveySeleQuestion(e)}\n value={surveySeleQuestion}\n options={surveyQuestions}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n />\n \n )}\n {surveyStructure?.length !== 1 && (\n \n \n {/* */}\n\n setSurveySeleStructure(e)}\n value={surveySeleStructure}\n options={surveyStructure}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n />\n \n )}\n
\n \n \n setMakePublic(!makePublic)} />\n
\n \n\n {!surveySeleQuestion?.id && (\n \n {formErrors.length > 0 && !pristine && (\n \n \n\n setSelectedPrimary(e)}\n value={selectedPrimary}\n // isMulti\n options={primaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n \n {secondaryCategory &&\n \n \n\n setSelectedSecondary(e)}\n value={selectedSecondary}\n isMulti\n options={secondaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n \n }\n \n \n UpdateTimezone(e)}\n value={timeZone}\n options={SortedTimezone()}\n />\n \n \n \n \n \n \n setEndDate(date)}\n showTimeSelect\n minDate={dateValue}\n maxDate={addDays(dateValue, 90)}\n dateFormat=\"MMMM d, yyyy h:mm aa\"\n />\n \n {/* \n \n \n setSelectedNoOfHours(e)}\n value={selectedNoOfHours}\n options={HoursList}\n />\n */}\n {!surveySeleQuestion?.id && (\n \n \n {/* */}\n\n setSurveySeleQuestion(e)}\n value={surveySeleQuestion}\n options={surveyQuestions}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n />\n \n )}\n {surveyStructure?.length !== 1 && (\n \n \n {/* */}\n\n setSurveySeleStructure(e)}\n value={surveySeleStructure}\n options={surveyStructure}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n />\n \n )}\n
\n {isFrench?ff.fr? ff.fr:ff?.name:ff?.name}
\n } else if (userEmployeeCategoryList?.includes(ff?.name_id)) {\n return {isFrench?ff.fr?ff.fr:ff?.name:ff?.name}
\n }\n return null\n })\n )\n}\n\nconst Subfactor = ({\n surveySchedule,\n groupList,\n primaryCategory,\n monthList,\n currentMonth,\n pageLoading,\n userAdmin,\n userEmployeeCategoryList,\n language_hook,\n survey_structure\n}) => {\n\n\n const checkIncludes = (op)=>{\n return primaryCategory.filter(f=>f.group_id == op).length>0\n }\n \n return (\n <>\n {currentMonth > 0 && {language_hook?language_hook.fetch_words('Primary Factor'):\"Primary Factor\"}
\n {/* Progress
*/}\n \n {name} \n
\n }\n return null\n })}\n \n {''} \n pc.group_id === op?.id)}\n monthList={monthList}\n surveySchedule={surveySchedule}\n key={i}\n userAdmin={userAdmin}\n userEmployeeCategoryList={userEmployeeCategoryList}\n\n />\n
\n }\n return null\n })}\n\n Primary Factor
\n\t\t\t\t\t\n\t\t\t\t{item?.value}
\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\n
\n );\n}\n\nexport default LongCountDownTimer;\n\nexport const ShortCountDownTimer = ({ futureTime }) => {\n const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());\n\n function calculateTimeLeft() {\n const difference = +new Date(futureTime) - +new Date();\n // console.log(difference)\n const Days = Math.floor(difference / (1000 * 60 * 60 * 24))\n const Hours = Math.floor((difference / (1000 * 60 * 60)) % 24)\n\n if (difference > 0) {\n return `${Days && `${Days}d`} ${Hours && `${Hours}:`}${Math.floor((difference / 1000 / 60) % 60)}:${Math.floor((difference / 1000) % 60)}`\n };\n\n return false\n }\n\n\n useEffect(() => {\n const timer1 = setTimeout(() => {\n setTimeLeft(calculateTimeLeft());\n }, 1000);\n\n return () => clearTimeout(timer1)\n });\n\n return timeLeft\n\n}\n\n\n\nexport const AddToCountDownTimer = ({\n years = 0,\n months = 0,\n weeks = 0,\n days = 0,\n hours = 0,\n minutes = 1\n}) => {\n\n const [futureTime] = useState(\n add(new Date(), {\n years,\n months,\n weeks,\n days,\n hours,\n minutes,\n seconds: 30,\n })\n )\n const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());\n\n\n function calculateTimeLeft() {\n\n // console.log(futureTime)\n const difference = +new Date(futureTime) - +new Date();\n // console.log(difference)\n const Days = Math.floor(difference / (1000 * 60 * 60 * 24))\n const Hours = Math.floor((difference / (1000 * 60 * 60)) % 24)\n\n if (difference > 0) {\n return `${Days && `${Days}d`} ${Hours && `${Hours}:`}${Math.floor((difference / 1000 / 60) % 60)}:${Math.floor((difference / 1000) % 60)}`\n };\n\n return false\n }\n\n\n useEffect(() => {\n const timer1 = setTimeout(() => {\n setTimeLeft(calculateTimeLeft());\n }, 1000);\n\n return () => clearTimeout(timer1)\n });\n\n return timeLeft\n\n}\n\n// export function SayHello({\n// years = 0,\n// months = 0,\n// weeks = 0,\n// days = 0,\n// hours = 0,\n// minutes = 1\n// }) => {\n\n// const [futureTime] = useState(\n// add(new Date(), {\n// years,\n// months,\n// weeks,\n// days,\n// hours,\n// minutes,\n// seconds: 30,\n// })\n// )\n// const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());\n\n\n// function calculateTimeLeft() {\n\n// console.log(futureTime)\n// const difference = +new Date(futureTime) - +new Date();\n// console.log(difference)\n// const Days = Math.floor(difference / (1000 * 60 * 60 * 24))\n// const Hours = Math.floor((difference / (1000 * 60 * 60)) % 24)\n\n// if (difference > 0) {\n// return `${Days && `${Days}d`} ${Hours && `${Hours}:`}${Math.floor((difference / 1000 / 60) % 60)}:${Math.floor((difference / 1000) % 60)}`\n// };\n\n// return false\n// }\n\n\n// useEffect(() => {\n// setTimeout(() => {\n// setTimeLeft(calculateTimeLeft());\n// }, 1000);\n// });\n\n// return timeLeft\n\n// }","import React, { useState, useEffect } from 'react'\nimport styled from \"styled-components\";\nimport { Button, Icon, Input, Form, TextArea, Modal, Header } from 'semantic-ui-react'\n\nimport DateTimePicker from \"react-datepicker\";\n\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport format from \"date-fns/format\";\nimport { useToasts } from \"react-toast-notifications\";\nimport { BasicErrorMessage } from \"utilities/ErrorMessages\";\n\nimport {\n SG_ADD_DEBRIEF_EMAIL,\n // SG_UPDATE_DEBRIEF_EMAIL, \n SG_GET_DEBRIEF_EMAIL,\n SG_DELETE_DEBRIEF_EMAIL,\n} from \"constants/actions\";\n\nfunction addDays(date, days) {\n var result = new Date(date);\n result.setDate(result.getDate() + days);\n return result;\n}\n\nfunction CustomEmailSend({ \n briefId, openEmail, \n setOpenEmail, \n showHistory, \n setShowHistory,\n RemindAll }) {\n const dispatch = useDispatch();\n const { addToast } = useToasts();\n\n\n const [userEmployee, setUserEmployee] = useState(false);\n const [emailSubject, setEmailSubject] = useState('')\n const [emailContent, setEmailContent] = useState('')\n const [scheduledFor, setScheduledFor] = useState(null)\n const [formErrors, setFormErrors] = useState([]);\n const [pristine, setPristine] = useState(true);\n\n const [endDate, setEndDate] = useState(new Date());\n\n const {\n get_employee,\n get_debrief_emails,\n } = useSelector(\n (state) => ({\n get_employee: state.employees,\n get_debrief_emails: state.debrief_email.debrief_email,\n }),\n shallowEqual\n );\n\n useEffect(() => {\n if (briefId) {\n dispatch({\n type: SG_GET_DEBRIEF_EMAIL,\n payload: `debrief_schedule=${briefId}`,\n });\n }\n }, [dispatch, briefId]);\n\n useEffect(() => {\n if (get_employee) {\n setUserEmployee(get_employee?.userEmp);\n }\n }, [get_employee]);\n\n\n useEffect(() => {\n const ErrorList = [];\n let totalErrors = 0\n if (emailContent?.length === 0) {\n ErrorList[\"emailContent\"] = {\n error: true,\n message: \"Please write reminder text\"\n };\n totalErrors += 1\n }\n if (emailSubject?.length === 0) {\n ErrorList[\"emailSubject\"] = {\n error: true,\n message: \"Please enter email subject\"\n };\n totalErrors += 1\n }\n ErrorList['errors'] = totalErrors\n setFormErrors(ErrorList);\n\n }, [emailContent, emailSubject, pristine]);\n\n function SendEmailAlert() {\n if (formErrors?.errors > 0) {\n setPristine(false);\n return;\n }\n setOpenEmail(false)\n // to schedule this event just pass one more param\n // scheduled_for\n // if there is not scheduled_for then it would be sent immediatly \n dispatch({\n type: SG_ADD_DEBRIEF_EMAIL,\n payload: {\n status: 2,\n name: \"custom email \",\n content: {\n subject: emailSubject,\n body: emailContent\n },\n\n debrief_schedule: briefId,\n sender: userEmployee,\n ...(scheduledFor && { scheduled_for: scheduledFor })\n }\n });\n\n setEmailContent('')\n addToast(\n \"Emails set successfully, please check history after a couple of mins.\",\n { appearance: \"success\" }\n );\n }\n\n function DeleteCustomEmail(id) {\n if (id) {\n dispatch({\n type: SG_DELETE_DEBRIEF_EMAIL,\n payload: {id: id}\n });\n }\n console.log(id)\n }\n\n return (\n <>\n {/* {!showHistory &&\n <>\n \n {timerComponents.length ? timerComponents : Time's up!}\n
\n\nHeader
\n On Date
\n Delete
\n {bf?.content?.subject}
\n \n \n {bf?.scheduled_for? format(\n new Date(bf?.scheduled_for?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n ): format(\n new Date(bf?.updated_at?.toLocaleString()),\n \"EEEE, MMM do h:mm a\")}\n
\n \n {bf?.response && bf?.response.map((emr, i2) => {\n return (\n \n \n \n \n\n )\n })}\n\n
\n })}\n\n\n {emr?.employee?.first_name} {emr?.employee?.last_name} - {emr?.employee?.email}
\n Status: {emr?.status}
\n Message: \n {JSON.stringify(emr?.message)}\n
\n Email Status: {emr?.employee?.email_status_text}
\n On Date:\n {format(\n new Date(bf?.updated_at?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n
\n \n {debriefSchedule?.status === 3 && (\n <>\n setShowConfirm(false)}\n onConfirm={CloseSurvey}\n />\n \n )}\n
\n {/*\t\n\t\t\t\t\t\t\t{timeLeft > 0 ? (\n\t\t\t\t\t\t\t\t\n
\n\n \n \n Calendar {\" \"}\n \n Manage Individual Responses for Scheduled Survey\n
\n \n
\n
| Name | \nReminder | }\nStatus | \n {nonHistory &&Action | }\n
|---|
\n Survey would close at{\" \"}\n {debriefSchedule?.close_at &&\n format(\n new Date(debriefSchedule?.close_at?.toLocaleString()),\n \"EEEE, do MMM yy - h:mm a\"\n )}\n
\n Extend it by{\" \"}\n\n Scheduled For \n\n \n {debriefSchedule?.scheduled_for &&\n format(\n new Date(debriefSchedule?.scheduled_for?.toLocaleString()),\n \"EEEE, do MMM yy - h:mm a\"\n )}\n
\nClosed At \n\n \n {debriefSchedule?.close_at &&\n format(\n new Date(debriefSchedule?.close_at?.toLocaleString()),\n \"EEEE, do MMM yy - h:mm a\"\n )}\n
\n
\n\n \n
\n
\n Status \n {debriefSchedule?.status_text}\n Responses / Requests \n\n \n {debriefSchedule?.total_responses}/{debriefSchedule?.total_requests}{\" \"}\n \n
\n | Name | \nStatus | \n
|---|
{averages[0].toFixed(1)}
\n {props.language_hook('Person')}\n {averages[1].toFixed(1)}
\n {props.language_hook('Performance')}\n \n {props.language_hook(\"Culture Domain Ranking\")} \n
\n \n );\n};\n\nexport default LegendStyle;\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-color: ${(props) => props.color || \"green\"} !important;\n }\n`;\n\nconst Container = styled.div`\n width: 100%;\n padding: 5px 20px;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);\n cursor: pointer;\n min-width: ${(props) => (props.pdf ? \"1000px\" : \"0px\")}\n &:hover {\n background-color: rgba(21, 92, 223, 0.05);\n color: black;\n }\n`;\n\nconst Title = styled.div`\n width: 300px;\n display: flex;\n flex-direction: row;\n align-items: center;\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n\n color: #7e7e7e;\n`;\n\nconst SubTitle = styled.div`\n width: 200px;\n`;\n\nconst Title2 = styled.div`\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 300;\n font-size: 12px;\n line-height: 18px;\n /* identical to box height */\n\n text-transform: uppercase;\n\n color: #7e7e7e;\n margin-bottom: 29px;\n`;\n\nconst Title3 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n color: #696969;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Row2 = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Score = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 21px;\n margin-right: ${(props) => (props.pdf ? \"10px\" : \"0px\")};\n /* identical to box height */\n\n color: #6d6d6d;\n height: 40px;\n`;\n\nconst Culture = styled.div``;\n\nconst Sub = styled.div`\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 400;\n font-size: 10px;\n line-height: 15px;\n text-align: center;\n\n color: #7e7e7e;\n`;\n\nconst Circle = styled.div`\n height: 15px;\n width: 15px;\n min-height: 15px;\n min-width: 15px;\n border-radius: 7.5px;\n margin-right: ${(props) => (props.pdf ? \"10px\" : \"0px\")};\n background-color: ${(props) => props.color};\n`;\n\nconst Details = styled.div`\n max-height: ${(props) => (props.selected ? \"1000px\" : \"0\")};\n transition: all 0.5s;\n overflow: hidden;\n padding-top: ${(props) => (props.selected ? \"10px\" : \"0\")};\n`;\n\nconst Dated = styled.div`\n margin-bottom: 20px;\n`;\n\nconst Buttons = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n margin-bottom: 20px;\n margin-top: 10px;\n`;\n\nconst Button = styled.div`\n background-color: #3078ff;\n padding: 5px 10px;\n color: white;\n`;\n","export default __webpack_public_path__ + \"static/media/empty.4eb861e6.png\";","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\n\nimport Screen from \"assets/images/empty/empty.png\";\n\nconst Empty = ({language_hook}) => {\n\treturn (\n\t\t\n\t\t\t\t \n\t\t\t\t setVertical(t.value)}\n\t\t\t\t />\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t \n\t\t\t setHorizontal(t.value)}\n\t\t\t />\n\t\t\t
\n\t\t\t\n\t\t\t\t{titles.map((item=>{\n\t\t\t\t\treturn {horizontal.priority == 'questions'? \n\t\t\t\t\t\tlanguage_hook.is_french()? item.fr:item.title: language_hook.is_french()? item.fr: item.name} \n\t\t\t\t}))}\n\t\t\t\t\n\t\t\t\n\n\t\t\t{calcluated.map((item)=>{\n\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t<Image src={TeamIcon} style={{marginRight:10}}/>{language_hook.is_french()? getFrench(item):item.title} \n\t\t\t\t\t\t{titles.map((t,i)=>{\n\t\t\t\t\t\t\tlet anchor_data = horizontal.priority == 'questions' ? item.role_data.find(f=>f.id==parseInt(t.id)-1) : item.role_data.find(f=>f.id==t.id)\n\t\t\t\t\t\t\tlet select = {factor:parseInt(anchor_data?.id),id:horizontal.id-1}\n\t\t\t\t\t\t\tif(anchor_data){\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\thandle_navigation(item,select)}/>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t})}\n\n\t\t\t\t\t
\n\t\t\t\t\t)\n\t\t\t})}\n\t\t\t\n\n\t\t\t\n\n\t\t\t{/**/}\n\t\t\n\t\t)\n}\n\n\nexport default HeatMap\n\n\nconst Container = styled.div`\n\twidth:100%;\n\tmargin-top:30px;\n\talign-items:center;\n\tdisplay:flex;\n\tflex-direction:column;\n\ttransition:width 1s;\n`\n\nconst Title = styled.div`\n\twidth:150px;\n\tdisplay:flex;\n\talign-items:center;\n\tfont-family: 'Poppins';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 9px;\n\tline-height: 18px;\n\tmargin-right:5px;\n\t/* identical to box height */\n\n\n\tcolor: #7E7E7E;\n`\n\nconst Row = styled.div`\n\tdisplay:flex;\n\twidth:100%;\n\talign-items:center;\n\tjustify-content:center;\n\t\n`\n\nconst Square = styled.div`\n\theight:50px;\n\twidth:${props=>'calc((100% - 150px) / '+ props.width+')'};\n\tmax-width:${MAX_WIDTH};\n\tbackground-color:${props=>props.color};\n\topacity:${props=>props.opacity};\n\tcursor:pointer;\n\tmargin-right:0px;\n\tposition:relative;\n\n\tborder:${props=>props.hover?'1px solid #476DFA':''};\n\tdisplay:flex;\n\tjustify-content:center;\n\talign-items:center;\n\n`\nconst TopRow = styled.div`\n\tdisplay:flex;\n\twidth:100%;\n\tmargin-top:10px;\n\talign-items:center;\n\tjustify-content:center;\n`\n\nconst TH = styled.div`\n\twidth:${props=>'calc((100% - 100px) / '+ props.width+')'};\n\tmax-width:${MAX_WIDTH};\n\tjustify-content:center;\n\tdisplay:flex;\n\ttext-align:center;\n\n\tfont-family: 'Poppins';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 9px;\n\tline-height: 18px;\n\t/* identical to box height */\n\n\n\tcolor: #7E7E7E;\n`\n\nconst Legend = styled.div`\n\tdisplay:flex;\n\tmargin-top:40px;\n\tpadding-left:100px;\n`\n\nconst LI = styled.div`\n\tdisplay:flex;\n\tflex-direction:column;\n\talign-items:center;\n\tmargin-right:5px;\n\theight:22px;\n\twidth:100px;\n\tposition:relative;\n\tcolor:white;\n\n\tfont-family: 'Poppins';\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-size: 14px;\n\tline-height: 24px;\n`\n\nconst Color = styled.div`\n\tbackground-color:${props=>props.color};\n\n\tborder-radius:5px;\n\topacity:${props=>props.opacity};\n\tposition:absolute;\n\theight:100%;\n\twidth:100%;\n\tz-index:-1;\n\n`\n\nconst Label = styled.div`\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 500;\nfont-size: 14px;\nline-height: 21px;\n/* identical to box height */\n\n\ncolor: #6D6D6D;\nmargin-right:50px;\n`;\n\nconst OptionArea = styled.div`\n\tdisplay:flex;\n\tmargin-bottom:40px;\n`\n\nconst StyledSelect = styled(Select)`\n font-family: 'Poppins', sans-serif !important;\n border-radius:20px !important;\n font-size:14px !important;\n color:#9E9FA1 !important;\n font-weight:500 !important;\n\n .item{\n font-size:14px !important;\n color:#9E9FA1 !important;\n font-family: 'Poppins', sans-serif !important;\n }\n`\n\nconst Image = styled.img`\n \n`\n\nconst SquareContainer = styled.div`\n\tposition:relative;\n\tdisplay:flex;\n\talign-items:center;\n`\n\nconst Popped = styled.div`\n\tfont-family: 'Poppins';\n\tfont-style: normal;\n\tfont-weight: 500;\n\tfont-size: 14px;\n\tline-height: 24px;\n\n\tdisplay: ${props=>props.hover?'flex':'none'};\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: 5px 16px;\n\tbackground: #303030;\n\tborder-radius: 10px;\n\tcolor:white;\n\n\tposition:absolute;\n\ttop:-40px;\n\n`","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useLayoutEffect, useState, useRef } from \"react\";\nimport { Icon, Progress, Dropdown, Popup } from \"semantic-ui-react\";\nimport LegendStyle from \"./LegendStyleOTP\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport Empty from \"./Empty\";\nimport BasicLegend from \"./BasicLegend\";\nimport PDFBasicLegend from \"./PDFBasicLegend\";\nimport LegendIcon from \"./LegendIcon\";\nimport Heatmap from \"./Heatmap\";\nimport { calculate_data } from \"./data_navigation/calculate_data\";\nimport Languages from \"language/index\";\nimport { useLanguageSetting } from \"language/redux_store\";\n\nfunction randomIntFromInterval(min, max) {\n // min and max included\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n\nconst colors2 = [\"48, 120, 255\", \"8, 194, 81\", \"126, 36, 234\", \"255, 45, 85\"];\n\nconst colors = [\n \"#0387EF\",\n \"#FFC600\",\n \"#02AE5B\",\n \"#FF0000\",\n \"#fcba03\",\n \"#2b704d\",\n \"#472aa3\",\n \"#a3852a\",\n \"#a32a89\",\n \"#2a8ba3\",\n \"#a1a32a\",\n \"#2aa330\",\n];\n\nconst options = [\n { key: 1, text: \"Winter Sports\", value: 1 },\n { key: 2, text: \"Summer Sports\", value: 2 },\n { key: 3, text: \"Para Sports\", value: 3 },\n];\n\nconst options2 = [\n { key: 1, text: \"Overview\", value: 1 },\n { key: 2, text: \"Technical Leaders\", value: 2 },\n { key: 3, text: \"Sport Scientists\", value: 3 },\n { key: 3, text: \"Athletes\", value: 3 },\n { key: 5, text: \"Coaches\", value: 5 },\n];\n\nconst Grid = ({\n data,\n nav,\n refresh,\n structure,\n WhiteLabel,\n setSub,\n pdf,\n rule,\n questions,\n overviewReport = false,\n access,\n selected,\n otpPdf,\n otpView,\n language,\n}) => {\n const [highlight, setHighlight] = React.useState(null);\n const [select, setSelected] = React.useState(null);\n const globalLang = useLanguageSetting();\n const configLang = language;\n const language_hook = new Languages(configLang || globalLang);\n const anchor = useSelector((state) => state.audit?.anchor, shallowEqual);\n\n const get_survey_structure = useSelector(\n (state) => state.surveystructure.survey_structure,\n shallowEqual\n );\n const pdfAnchor = get_survey_structure[0].categories.find(\n (f) => f.priority.toLowerCase() === \"primary\"\n ).id;\n\n const rolesAnchor = get_survey_structure[0].categories.find(\n (f) => f.priority.toLowerCase() === \"secondary\"\n ).id;\n\n const [calculated, setCalculated] = React.useState([]);\n const [render, setRender] = React.useState(false);\n\n const checkSubFactors = (id, option) => {\n if (structure.categories[id].subfactors.length > 0) {\n let factor = structure.categories[id].subfactors.filter(\n (f) => f.parent === option\n );\n if (factor.length > 0) {\n return true;\n }\n }\n\n return false;\n };\n\n React.useEffect(() => {\n if (anchor && !otpView && !otpPdf) {\n setRender(!render);\n const useAnchor = (pdf === true && pdfAnchor) || anchor;\n\n setCalculated(\n calculate_data(data, nav, structure, useAnchor, rule, questions, access)\n );\n }\n\n if (otpView && otpView) {\n setRender(!render);\n\n const useAnchor = pdfAnchor;\n setCalculated(\n calculate_data(data, nav, structure, useAnchor, rule, questions, access)\n );\n }\n\n if (otpPdf && !otpView) {\n setRender(!render);\n const useAnchor = rolesAnchor;\n if (useAnchor) {\n setCalculated(\n calculate_data(\n data,\n nav,\n structure,\n useAnchor,\n rule,\n questions,\n access\n )\n );\n }\n }\n }, [nav, refresh, anchor, otpView]);\n\n if (calculated.filter((f) => f.raw.length > 0).length === 0) {\n return \n \n {language_hook.fetch_words(\"culture_title\")} \n \n \n {selected == 1 ? (\n \n {calculated\n .filter((f) => f.raw.length > 0)\n .map((item, i) => (\n \n {language_hook.fetch_words(\"performance\")}\n \n {language_hook.fetch_words(\"person\")} \n \n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i, k) => (\n \n {i}\n \n ))}\n \n \n {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((i, k) => (\n \n {i}\n \n ))}\n \n \n {language_hook.fetch_words(\"culture_quadrant_1\")} \n \n \n {language_hook.fetch_words(\"culture_quadrant_2\")} \n \n \n \n \n {language_hook.fetch_words(\"culture_quadrant_3\")} \n \n \n {language_hook.fetch_words(\"culture_quadrant_4\")} \n \n {(pdf && (\n language_hook.is_french()}\n />\n )) || (\n language_hook.is_french()}\n />\n )}\n \n ) : (\n language_hook.fetch_words(w)}\n isFrench={() => language_hook.is_french()}\n />\n )}\n\n {selected == 1 ? (\n \n ) : (\n \"\"\n )}\n \n \n );\n};\n\nexport default Grid;\n\nconst Dot = (props) => {\n return (\n props.hover(props.i)}\n onMouseLeave={() => props.hover(null)}\n >\n {props.title} \n \n );\n};\n\nconst DotContainer = styled.div`\n display: flex;\n cursor: pointer;\n opacity: ${(props) => (props.hover ? 1 : 0.3)};\n`;\n\nconst MasterDot = ({ data, i, highlight, selected, hide }) => {\n const [hover, setHover] = useState(false);\n\n return (\n <>\n setHover(true)}\n onMouseLeave={() => setHover(false)}\n >\n \n \n props.onClick(props.selected == props.i ? null : props.i)\n }\n hover={\n props.highlight === null\n ? true\n : props.highlight == props.i\n ? true\n : false\n }\n selected={props.selected == props.i}\n onMouseEnter={() => props.hover(props.i)}\n onMouseLeave={() => props.hover(null)}\n >\n \n \n\t <Circle color={props.data.color} />\n <Image src={TeamIcon}/>\n\t {props.title.name}\n \n \n \n {props.dimensions!=1?\n \t\n\t \n\t :\"\"}\n \n\n \n \n );\n};\n\nexport default LegendStyle;\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-color: ${(props) => props.color || \"green\"} !important;\n }\n`;\n\nconst Container = styled.div`\n width: 100%;\n padding: 5px 130px 5px 35px;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);\n margin-top:10px;\n cursor:pointer;\n`;\n\nconst Title = styled.div`\n width: 300px;\n display:flex;\n flex-direction:row;\n align-items:center;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 18px;\n\ncolor: #7E7E7E;\n`;\n\nconst SubTitle = styled.div`\n width: 200px;\n`;\n\nconst Title2 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 0px;\n margin-bottom: 10px;\n`;\n\nconst Title3 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n color: #696969;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Row2 = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Score = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 500;\nfont-size: 14px;\nline-height: 21px;\n/* identical to box height */\n\n\ncolor: #6D6D6D;\n height:40px;\n`;\n\nconst Culture = styled.div``;\n\nconst Sub = styled.div`\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 10px;\nline-height: 15px;\ntext-align: center;\n\ncolor: #7E7E7E;\n`;\n\nconst Circle = styled.div`\n height: 12px;\n width: 12px;\n border-radius: 6px;\n background-color: ${(props) => props.color};\n margin-right:63px;\n`;\n\nconst Details = styled.div`\n max-height: ${(props) => (props.selected ? \"1000px\" : \"0\")};\n transition: all 0.5s;\n overflow: hidden;\n padding-top: ${(props) => (props.selected ? \"10px\" : \"0\")};\n`;\n\nconst Dated = styled.div`\n margin-bottom: 20px;\n`;\n\nconst Buttons = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n margin-bottom: 20px;\n margin-top: 10px;\n`;\n\nconst Button = styled.div`\n background-color: #3078ff;\n padding: 5px 10px;\n color: white;\n`;\n\nconst Image = styled.img`\n margin-right:20px;\n`\n\nconst Diff = styled.span`\n font-size:10px;\n`","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useLayoutEffect, useState, useRef } from \"react\";\nimport { Icon, Progress, Dropdown } from \"semantic-ui-react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { build_default_State } from \"./data_navigation/calculate_data\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport {\n\tSET_SELECTED_QUESTION,\n\tSET_SUB_NAV,\n\tSET_SELECTED_FILTERS,\n\tSET_NAVIGATION,\n} from \"constants/actions\";\nimport { erf } from \"mathjs\";\n\nconst configure = (structure) => {\n let ids = 0;\n let names = [{ title: \"Overall Culture\", level: 0, id: ids }];\n ids += 1;\n if (structure?.dimensions) {\n structure?.dimensions.map((item, i) => {\n names.push({ title: item.title, level: 1, id: ids, dimension: i });\n ids += 1;\n if (item.factors.length > 0) {\n item.factors.map((x, idx) => {\n names.push({\n title: x.title,\n level: 2,\n id: ids,\n dimension: i,\n factor: idx,\n });\n ids += 1;\n });\n }\n });\n }\n\n return names;\n};\n\nconst zptile = (z_score) => {\n return 0.5 * (erf(z_score / 2 ** 0.5) + 1);\n};\n\n\nconst LinkedRow = ({data,color,dimensions,nav,checked,standards}) =>{\n const dispatch = useDispatch();\n const [structure, setStructure] = useState(null);\n const [filteredData1, setFilteredData1] = useState([]);\n const [filteredData2, setFilteredData2] = useState([]);\n\n const questions = useSelector(\n (state) => state.audit?.question_structure,\n shallowEqual\n );\n\n const categories = useSelector(\n (state) => state.audit?.category_structure,\n shallowEqual\n );\n\n useEffect(() => {\n\n if(data?.ranking){\n setFilteredData1(\n data.ranking\n .sort((a, b) => b.response - a.response)\n );\n\n setFilteredData2(\n data.ranking\n .filter((f) => f.id === 1)\n .sort((a, b) => b.response - a.response)\n );\n }\n\t\t\n\t}, [data]);\n\n \tuseEffect(() => {\n\t\tif (questions) {\n\t\t\tif (Object.keys(questions).length > 0) {\n\t\t\t\t// setQ(questions);\n\t\t\t\tsetStructure(configure(questions));\n\t\t\t}\n\t\t}\n\t}, [questions]);\n\nconst selected2 = useSelector((state) => state.audit?.filters, shallowEqual);\n\n const navigate = (select) => {\n\n if (data) {\n let selected = structure.find(\n (f) => f.dimension == select.id && f.factor == select.factor\n );\n\n dispatch({\n type: SET_SELECTED_QUESTION,\n payload: selected,\n });\n dispatch({\n type: SET_SUB_NAV,\n payload: 3,\n });\n\n if(data.navigation){\n onSelect({\n id: data.navigation.id,\n option: data.navigation.option,\n subfactor: data.navigation.subfactor,\n name: { name: data.title.name },\n });\n }\n \n }\n else{\n let selected = structure.find(\n (f) => f.dimension == select.id && f.factor == select.factor\n );\n\n dispatch({\n type: SET_SELECTED_QUESTION,\n payload: selected,\n });\n dispatch({\n type: SET_SUB_NAV,\n payload: 3,\n });\n dispatch({\n type: SET_SELECTED_FILTERS,\n payload: selected2,\n });\n set_nav([])\n }\n \n\n\n };\n\n const selected = useSelector((state) => state.audit?.filters, shallowEqual);\n\n \n\n const onSelect = (s) => {\n\n let check = selected.filter(\n (f) =>\n f.id === s.id &&\n f.subfactor === s.subfactor &&\n f.option === s.option\n );\n let _selected;\n\n\n if (check.length > 0) {\n _selected = selected;\n } else {\n _selected = [...selected, s];\n }\n\n dispatch({\n type: SET_SELECTED_FILTERS,\n payload: _selected,\n });\n\n set_nav(_selected);\n };\n\n const set_nav = (new_selected) => {\n let _selected = build_default_State(categories);\n // console.log(_selected, new_selected);\n new_selected.map((item, i) => {\n if (_selected[item.id].selected) {\n _selected[item.id][\"selected\"] = false;\n Object.keys(_selected[item.id]).map((s) => {\n if (s != \"selected\" && s != \"priority\") {\n _selected[item.id][s].selected = false;\n }\n });\n }\n\n if (item.subfactor != null) {\n _selected[item.id][item.option].subfactors[\n item.subfactor\n ].selected = true;\n _selected[item.id][item.option].sub = true;\n } else {\n _selected[item.id][item.option].selected = true;\n }\n return null;\n });\n\n dispatch({\n type: SET_NAVIGATION,\n payload: _selected,\n });\n };\n\n if(!data?.ranking){\n return \n }\n\n\n const getPercentile = (bench,val) =>{\n let zscore = (val - bench.average) / bench.std\n return (zptile(zscore)*100).toFixed(0)\n }\n\n const get_last = (item) =>{\n let last \n if(!item.last && data.last_ranking){\n last = data.last_ranking.find(f=>f.id==item.id&&f.factor==item.factor)?.response\n }\n else{\n last = item.last\n }\n\n if(last){\n return '('+((item.response - last)>0?'+':\"\")+(item.response - last).toFixed(1)*10 +'%)'\n }\n\n return \"\"\n \n }\n\n const checkBenchmark = (benchmark) =>{\n let bench = ((0.842*benchmark.std + benchmark.average)*10).toFixed(0)\n\n if(bench>100){\n return 100\n }\n\n return bench\n }\n\n const getColor = (score) =>{\n if(score < -10){\n return '#FF6576'\n }\n if(score < 0){\n return '#FEA711'\n }\n if(score > 0){\n return 'green'\n }\n }\n\n\n\n\n return (\n \t\n \n \n \n {questions.dimensions[0].title} \n\n \n {questions.dimensions[1].title} \n{/* \n {standards?(<>\n Benchmark \n\n Excellence \n )\n :\"\"} */}\n \n {questions?.dimensions.length > 0 && filteredData1.length > 0\n ?filteredData1.map((item, i) => {\n let benchmark = standards?.response.pillars.find(f=>f.id==item.id&&f.factor==item.factor)\n let response = item.response.toFixed(1)\n let bench_diff\n\n \n if(benchmark){\n bench_diff = (response - benchmark.average).toFixed(1) *10\n }\n\n // let response = checked? getPercentile(benchmark,item.response.toFixed(1)):item.response.toFixed(1)\n \n\n\t\t return \n\t\t navigate(item)}>\n\t\t {/*{i + 1 + \". \"} */}\n\t\t {\n\t\t questions?.dimensions[item?.id]\n\t\t ?.factors[item?.factor]?.title\n\t\t }\n\t\t \n\n \n \t\t \n\t\t \n\t\t {response}\n {checked? '('+bench_diff+'%)' :get_last(item)} \n\n\t\t \n\t\t
\n\t\t } ):\"\"}\n \n \n\n )\n}\n\nexport default LinkedRow\n\n\nconst color1 = 'linear-gradient(to right, #0159DB, #00B0F0) !important'\nconst color2 = 'linear-gradient(to right, #0DC6AB, #7DFBD4) !important'\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-image: ${props=>props.color==1?color1:color2};\n border-radius:15px !important;\n }\n border-radius:15px !important;\n`;\n\nconst ProgressArea = styled.div`\n position:relative;\n width:calc(100% - 180px);\n display:flex;\n align-items:center;\n`\n\nconst BM = styled.div`\n height:20px;\n border-left:1.5px dashed black;\n width:2px;\n position:absolute;\n left:${props=>props.left+'%'};\n\n`\n\nconst BM2 = styled.div`\n height:20px;\n border-left:1.5px solid #FA1E4E;\n width:2px;\n position:absolute;\n left:${props=>props.left+'%'};\n\n`\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n align-items: center;\n padding: 2.5px 0px 2.5px 2.5px;\n margin-bottom:7.5px;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 10px;\nline-height: 15px;\n\ncolor: #7E7E7E;\n`;\n\nconst Linked = styled.div`\n font-weight: 300;\n width: 180px;\n cursor: pointer;\n display: flex;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst Score = styled.div`\n width: 60px;\n margin-left: 25px;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 18px;\ntext-align: right;\ndisplay:flex;\ncolor: #7E7E7E;\n`;\n\nconst Container = styled.div`\n padding: 5px 5px 20px 5px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\n\nconst Column = styled.div`\n width: 100%;\n display:flex;\n flex-direction:column;\n align-items:center;\n`;\n\nconst Title = styled.div`\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 600;\nfont-size: 12px;\nline-height: 18px;\n/* identical to box height */\n\n\ncolor: #C0C0C0;\n margin-bottom: 20px;\n`;\n\nconst LegendRow = styled.div`\n display:flex;\n margin-bottom:20px;\n align-items:center;\n flex-wrap:wrap;\n justify-content:space-evenly;\n`\n\nconst ColorSquare = styled.div`\n width:30px;\n height:2px;\n background-image:${props=>props.color==1?color2:color1};\n margin-right:10px;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);\n\n`\n\nconst LegendText = styled.div`\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 300;\n font-size: 8px;\n line-height: 13px;\n /* identical to box height */\n\n\n color: #7e7e7e;\n`\n\nconst BenchMark = styled.div`\n height:2px;\n border-bottom:2px dashed black;\n width:30px;\n margin-right:10px;\n margin-left:10px;\n`\n\nconst BenchMark2 = styled.div`\n height:2px;\n border-bottom:2px solid #FA1E4E;\n width:30px;\n margin-right:10px;\n margin-left:10px;\n `\n\nconst Diff = styled.span`\n font-size:10px;\n margin-left:8px;\n color:${props=>props.color};\n\n`","import styled from \"styled-components\";\nimport React from \"react\";\n\nimport './loading.css'\n\nconst ChartLoading = () =>{\n\n\treturn (\n\t\t\n\t\t\t \n\t\t)\n}\n\n\nexport default ChartLoading\n\n\nconst Container = styled.div`\n\theight:100%;\n\twidth:100%;\n\tdisplay:flex;\n\talign-items:center;\n\tjustify-content:center;\n`","import styled from \"styled-components\";\nimport React from \"react\";\nimport { Icon, Progress, Dropdown } from \"semantic-ui-react\";\nimport TeamIcon from 'assets/images/nav/team.svg'\n\n\n\nconst LegendStyle = (props) => {\n\n const getDifference = (d,data) =>{\n\n let last = data[d+2]\n let current = data[d]\n let diff = (current - last).toFixed(1)\n\n if(!isNaN(last)){\n return '('+(diff>0?'+':\"\")+ diff*10 +'%)'\n }\n\n return \"\"\n\n \n }\n\n\n\tconst calculate = () =>{\n\t\tlet sum =[0,0]\n\t\tlet n = 0\n\n let sum_last = [0,0]\n\n let n_1 = 0\n\n\t\tprops.data.filter(f=>f.summary[0]).map((item)=>{\n\t\t\tsum[0]+=item.summary[0]*item.n\n\t\t\tsum[1]+=item.summary[1]*item.n\n\t\t\tn+=item.n\n\t\t})\n\n props.data.filter(f=>f.summary_last[0]).map((item)=>{\n sum_last[0]+=item.summary_last[0]*item.n\n sum_last[1]+=item.summary_last[1]*item.n\n n_1+=item.n\n })\n\n\t\treturn [sum[0]/n,sum[1]/n,sum_last[0]/n_1,sum_last[1]/n_1]\t\t\n\t}\n\n\tconst [averages,setAverages] = React.useState(calculate())\n\n React.useEffect(()=>{\n setAverages(calculate())\n },[props.data])\n\n\n\n return (\n \n \n props.onClick()\n }\n >\n \n \n\t <Circle color={'white'} />\n\t Overall\n \n \n \n {props.dimensions!=1?\n \t\n\t \n\t :\"\"}\n \n\n \n \n );\n};\n\nexport default LegendStyle;\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-color: ${(props) => props.color || \"green\"} !important;\n }\n`;\n\nconst Container = styled.div`\n width: 100%;\n padding: 5px 130px 5px 35px;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);\n margin-top:10px;\n cursor:pointer;\n`;\n\nconst Title = styled.div`\n width: 300px;\n display:flex;\n flex-direction:row;\n align-items:center;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 600;\nfont-size: 12px;\nline-height: 18px;\n\ncolor: #7E7E7E;\n`;\n\nconst SubTitle = styled.div`\n width: 200px;\n`;\n\nconst Title2 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 0px;\n margin-bottom: 10px;\n`;\n\nconst Title3 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n color: #696969;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Row2 = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Score = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 500;\nfont-size: 14px;\nline-height: 21px;\n/* identical to box height */\n\n\ncolor: #6D6D6D;\n height:40px;\n`;\n\nconst Culture = styled.div``;\n\nconst Sub = styled.div`\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 10px;\nline-height: 15px;\ntext-align: center;\n\ncolor: #7E7E7E;\n`;\n\nconst Circle = styled.div`\n height: 12px;\n width: 12px;\n border-radius: 6px;\n background-color: ${(props) => props.color};\n margin-right:63px;\n`;\n\nconst Details = styled.div`\n max-height: ${(props) => (props.selected ? \"1000px\" : \"0\")};\n transition: all 0.5s;\n overflow: hidden;\n padding-top: ${(props) => (props.selected ? \"10px\" : \"0\")};\n`;\n\nconst Dated = styled.div`\n margin-bottom: 20px;\n`;\n\nconst Buttons = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n margin-bottom: 20px;\n margin-top: 10px;\n`;\n\nconst Button = styled.div`\n background-color: #3078ff;\n padding: 5px 10px;\n color: white;\n`;\n\nconst Image = styled.img`\n \n`\n\nconst Diff = styled.span`\n font-size:10px;\n`","import styled from \"styled-components\";\nimport React from \"react\";\nimport LegendStyle from \"./LegendStyle2\";\nimport { useSelector, shallowEqual } from \"react-redux\";\nimport BasicLegend from \"./BasicLegend\";\nimport Empty from \"./Empty\";\nimport Heatmap from \"./Heatmap\";\nimport { Icon, Progress, Popup, Radio } from \"semantic-ui-react\";\nimport LinkedRow from \"./LinkedRow2D\";\nimport ChartLoading from \"./ChartLoading\";\nimport LegendIcon from \"./LegendIcon\";\nimport OverviewLegend from \"./OverviewLegend\";\nimport 'intro.js/introjs.css';\nimport { Steps, Hints } from 'intro.js-react';\nimport PDFBasicLegend from \"./PDFBasicLegend\";\n\n\nimport {\n calculate_data,\n check_for_subfactors,\n getTitle,\n} from \"./data_navigation/calculate_data\";\n\nfunction randomIntFromInterval(min, max) {\n // min and max included\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n\nconst colors2 = [\"48, 120, 255\", \"8, 194, 81\", \"126, 36, 234\", \"255, 45, 85\"];\n\nconst colors = [\n \"#0387EF\",\n \"#FFC600\",\n \"#02AE5B\",\n \"#FF0000\",\n \"#fcba03\",\n \"#2b704d\",\n \"#472aa3\",\n \"#a3852a\",\n \"#a32a89\",\n \"#2a8ba3\",\n \"#a1a32a\",\n \"#2aa330\",\n];\n\nconst options = [\n { key: 1, text: \"Winter Sports\", value: 1 },\n { key: 2, text: \"Summer Sports\", value: 2 },\n { key: 3, text: \"Para Sports\", value: 3 },\n];\n\nconst options2 = [\n { key: 1, text: \"Overview\", value: 1 },\n { key: 2, text: \"Technical Leaders\", value: 2 },\n { key: 3, text: \"Sport Scientists\", value: 3 },\n { key: 3, text: \"Athletes\", value: 3 },\n { key: 5, text: \"Coaches\", value: 5 },\n];\n\n\n\nconst Grid = ({\n data,\n nav,\n refresh,\n structure,\n WhiteLabel,\n setSub,\n rule,\n questions,\n pdf,\n overviewReport = false,\n selected,\n standards,\n pdfAnchor,\n}) => {\n const [highlight, setHighlight] = React.useState(null);\n const [select, setSelected] = React.useState(null);\n const anchor = useSelector((state) => state.audit?.anchor, shallowEqual);\n const [calculated, setCalculated] = React.useState([]);\n const [render, setRender] = React.useState(false);\n const [loading, setLoading] = React.useState(true);\n const [average, setAverage] = React.useState(null);\n const [checked, setChecked] = React.useState(false);\n const getAverage = () => {\n let ranking = [];\n let total = [0, 0];\n let N = 0;\n\n let last_total = [0, 0];\n let N_1 = 0;\n\n calculated\n .filter((f) => f.summary[0])\n .map((item) => {\n item.ranking.map((r) => {\n let resp = r.response;\n let n = item.n;\n ranking.push({ ...r, n });\n });\n\n N += item.n;\n total[0] += item.summary[0] * item.n;\n total[1] += item.summary[1] * item.n;\n\n N_1 += item.last_n;\n last_total[0] += item.summary_last[0] * item.last_n;\n last_total[1] += item.summary_last[1] * item.last_n;\n });\n\n let ranked = calculated\n .filter((f) => f.summary[0])[0]\n ?.ranking.map((rank, i) => {\n let _total = 0;\n let n = 0;\n let id = rank.id;\n let factor = rank.factor;\n let n_last = 0\n let _last_total = 0\n\n\n calculated.map((item) => {\n const last_resp = item?.last_ranking?.filter(\n (f) => f.id == id && f.factor == factor\n )[0];\n _last_total += last_resp?.response * item?.last_n;\n n_last += item?.last_n;\n });\n\n let last = calculated\n .filter((f) => f.summary[0])[0]\n .last_ranking.filter(\n (f) => f.id == id && f.factor == factor\n )[0]?.response;\n\n ranking\n .filter((f) => f.id == id && f.factor == factor)\n .map((item) => {\n _total += item?.response * item?.n;\n n += item?.n;\n });\n\n return { id, factor, response: _total / n, last:_last_total/n_last };\n });\n\n return {\n summary: [total[0] / N, total[1] / N],\n ranking: ranked,\n last: [last_total[0] / N_1, last_total[1] / N_1],\n };\n };\n\n const get_survey_structure = useSelector(\n (state) => state.surveystructure.survey_structure,\n shallowEqual\n );\n // const pdfAnchor = get_survey_structure[0].categories.find(\n // (f) => f.priority.toLowerCase() === \"secondary\"\n // ).id;\n\n const checkSubFactors = (id, option) => {\n if (structure.categories[id].subfactors.length > 0) {\n let factor = structure.categories[id].subfactors.filter(\n (f) => f.parent == option\n );\n if (factor.length > 0) {\n return true;\n }\n }\n\n return false;\n };\n\n React.useEffect(() => {\n const useAnchor = pdf && pdfAnchor ? pdfAnchor : anchor;\n if (useAnchor) {\n setRender(!render);\n setCalculated(\n calculate_data(data, nav, structure, useAnchor, rule, questions).sort(\n (a, b) => a.summary[0] + a.summary[1] - b.summary[0] - b.summary[1]\n )\n );\n setSelected(null);\n }\n }, [nav, refresh, anchor, data, structure, pdfAnchor]);\n\n React.useEffect(() => {\n setLoading(true);\n if (calculated.length > 0) {\n setAverage(getAverage());\n }\n setTimeout(() => setLoading(false), 300);\n }, [calculated, select]);\n\n if (calculated && calculated.filter((f) => f.summary[0]).length == 0) {\n return \n \n Culture Index Map \n {standards?.response?.pillars?.length > 0 ? (\n setChecked(d.checked)}\n style={{ fontSize: 10, marginRight: 40 }}\n />\n ) : (\n \"\"\n )}\n \n \n {selected == 1 ? (\n \n \n {calculated\n .filter((f) => f.summary[0])\n .map((item, i) => (\n setSelected(d)}\n />\n ))}\n \n \n {questions.dimensions[1].title}\n \n \n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => {\n return {item} ;\n })}\n \n \n \n \n {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((item) => {\n return {item} ;\n })}\n \n {questions.dimensions[0].title} \n \n\n \n {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((item) => {\n return \n\n \n {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((item) => {\n return \n \n {pdf ? (\n \n ) : (\n \n\n {selected == 1 && !pdf ? (\n setSelected(null)}\n questions={questions}\n />\n ) : (\n \"\"\n )}\n\n {selected == 1 && !pdf\n ? calculated\n .filter((f) => f.summary[0])\n .map((item, i) => {\n return (\n setHighlight(d)}\n highlight={highlight}\n selected={select}\n pdf={pdf}\n onClick={(d) => setSelected(d)}\n color={WhiteLabel.highlight}\n questions={questions}\n />\n );\n })\n : \"\"}\n \n );\n};\n\n// \n\nexport default Grid;\n\nconst Dot = (props) => {\n return (\n props.hover(props.i)}\n onMouseLeave={() => props.hover(null)}\n >\n {props.title} \n \n );\n};\n\nconst DotContainer = styled.div`\n display: flex;\n cursor: pointer;\n opacity: ${(props) => (props.hover || props.pdf ? 1 : 0.3)};\n`;\n\nconst MasterDot = ({\n data,\n i,\n highlight,\n selected,\n hide,\n rule,\n pdf,\n onClick,\n}) => {\n const [hover, setHover] = React.useState(false);\n return (\n <>\n setHover(true)}\n onMouseLeave={() => setHover(false)}\n onClick={() => onClick(i)}\n >\n \n \n props.onClick(props.selected == props.i ? null : props.i)\n }\n hover={\n props.highlight === null\n ? true\n : props.highlight == props.i\n ? true\n : false\n }\n selected={props.selected == props.i}\n onMouseEnter={() => props.hover(props.i)}\n onMouseLeave={() => props.hover(null)}\n >\n \n \n\t <Circle color={props.data.color} />\n\t {props.title.name}\n \n \n \n {props.dimensions!=1?\n \t\n\t \n\t :\"\"}\n \n\n \n );\n};\n\nexport default LegendStyle;\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-color: ${(props) => props.color || \"green\"} !important;\n }\n`;\n\nconst Container = styled.div`\n width: 100%;\n padding: 5px 20px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n`;\n\nconst Title = styled.div`\n width: 200px;\n display:flex;\n flex-direction:row;\n align-items:center;\n`;\n\nconst SubTitle = styled.div`\n width: 200px;\n`;\n\nconst Title2 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n margin-top: 0px;\n margin-bottom: 10px;\n`;\n\nconst Title3 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n color: #696969;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Row2 = styled.div`\n display: flex;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Score = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n height:40px;\n`;\n\nconst Culture = styled.div``;\n\nconst Sub = styled.div`\n font-size: 10px;\n font-weight: 400;\n`;\n\nconst Circle = styled.div`\n height: 15px;\n width: 15px;\n border-radius: 7.5px;\n background-color: ${(props) => props.color};\n margin-right:10px;\n`;\n\nconst Details = styled.div`\n max-height: ${(props) => (props.selected ? \"1000px\" : \"0\")};\n transition: all 0.5s;\n overflow: hidden;\n padding-top: ${(props) => (props.selected ? \"10px\" : \"0\")};\n`;\n\nconst Dated = styled.div`\n margin-bottom: 20px;\n`;\n\nconst Buttons = styled.div`\n width: 100%;\n display: flex;\n justify-content: flex-end;\n margin-bottom: 20px;\n margin-top: 10px;\n`;\n\nconst Button = styled.div`\n background-color: #3078ff;\n padding: 5px 10px;\n color: white;\n`;\n","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useLayoutEffect, useState, useRef } from \"react\";\nimport { Icon, Progress, Dropdown } from \"semantic-ui-react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { build_default_State } from \"./data_navigation/calculate_data\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport {\n\tSET_SELECTED_QUESTION,\n\tSET_SUB_NAV,\n\tSET_SELECTED_FILTERS,\n\tSET_NAVIGATION,\n} from \"constants/actions\";\n\n\nconst configure = (structure) => {\n let ids = 0;\n let names = [{ title: \"Overall Culture\", level: 0, id: ids }];\n ids += 1;\n if (structure?.dimensions) {\n structure?.dimensions.map((item, i) => {\n names.push({ title: item.title, level: 1, id: ids, dimension: i });\n ids += 1;\n if (item.factors.length > 0) {\n item.factors.map((x, idx) => {\n names.push({\n title: x.title,\n level: 2,\n id: ids,\n dimension: i,\n factor: idx,\n });\n ids += 1;\n });\n }\n });\n }\n\n return names;\n};\n\n\nconst LinkedRow = ({data,color}) =>{\n const dispatch = useDispatch();\n\n const [structure, setStructure] = useState(null);\n const [filteredData1, setFilteredData1] = useState([]);\n\n const questions = useSelector(\n (state) => state.audit?.question_structure,\n shallowEqual\n );\n\n const categories = useSelector(\n (state) => state.audit?.category_structure,\n shallowEqual\n );\n\n useEffect(() => {\n\t\tsetFilteredData1(\n\t\t\tdata.ranking\n\t\t\t\t.filter((f) => f.id === 0)\n\t\t\t\t.sort((a, b) => b.response - a.response)\n\t\t);\n\t}, [data]);\n\n \tuseEffect(() => {\n\t\tif (questions) {\n\t\t\tif (Object.keys(questions).length > 0) {\n\t\t\t\t// setQ(questions);\n\t\t\t\tsetStructure(configure(questions));\n\t\t\t}\n\t\t}\n\t}, [questions]);\n\n const navigate = (select) => {\n if (data) {\n let selected = structure.find(\n (f) => f.dimension == select.id && f.factor == select.factor\n );\n\n dispatch({\n type: SET_SELECTED_QUESTION,\n payload: selected,\n });\n dispatch({\n type: SET_SUB_NAV,\n payload: 3,\n });\n\n onSelect({\n id: data.navigation.id,\n option: data.navigation.option,\n subfactor: data.navigation.subfactor,\n name: { name: data.title.name },\n });\n }\n };\n\n const selected = useSelector((state) => state.audit?.filters, shallowEqual);\n\n const get_last = (item) =>{\n let last \n if(!item.last && data.last_ranking){\n last = data.last_ranking.find(f=>f.id==item.id&&f.factor==item.factor)?.response\n }\n else{\n last = item.last\n }\n\n if(last){\n let diff = item.response - last\n return 0?'green':'red'}>{'('+((item.response - last)>0?'+':\"\")+(item.response - last).toFixed(1)*10 +'%)'} \n }\n\n return \"\"\n \n }\n\n\n const onSelect = (s) => {\n let check = selected.filter(\n (f) =>\n f.id === s.id &&\n f.subfactor === s.subfactor &&\n f.option === s.option\n );\n let _selected;\n if (check.length > 0) {\n _selected = selected;\n } else {\n _selected = [...selected, s];\n }\n\n dispatch({\n type: SET_SELECTED_FILTERS,\n payload: _selected,\n });\n\n set_nav(_selected);\n };\n\n const set_nav = (new_selected) => {\n let _selected = build_default_State(categories);\n // console.log(_selected, new_selected);\n new_selected.map((item, i) => {\n if (_selected[item.id].selected) {\n _selected[item.id][\"selected\"] = false;\n Object.keys(_selected[item.id]).map((s) => {\n if (s != \"selected\" && s != \"priority\") {\n _selected[item.id][s].selected = false;\n }\n });\n }\n if (item.subfactor != null) {\n _selected[item.id][item.option].subfactors[\n item.subfactor\n ].selected = true;\n _selected[item.id][item.option].sub = true;\n } else {\n _selected[item.id][item.option].selected = true;\n }\n return null;\n });\n\n dispatch({\n type: SET_NAVIGATION,\n payload: _selected,\n });\n };\n\n\n\n return (\n \t\n \n );\n } else if (calculated[select].summary_diff[0] < 0) {\n return (\n \n \n );\n }\n }\n\n\n\n return (\n \n \n Diversity, Equity, & Inclusion Metrics \n \n \n {selected == 1 ? (\n \n Scores from the most recent survey's for each of the anchor factors shown \n {loading? \n ) : (\n \n \n );\n};\n\nexport default Grid;\n\n\nconst LTitle = styled.div`\n margin-bottom: 10px;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 500;\nfont-size: 16px;\nline-height: 24px;\ndisplay:flex;\nalign-items:center;\n/* identical to box height */\n\n\ncolor: #414141;\n`;\n\nconst Positioned = styled.div`\n position: absolute;\n`;\n\nconst Circle = styled.div`\n height: 10px;\n width: 10px;\n border-radius: 5px;\n background-color: ${(props) => props.color};\n margin-right:10px;\n`;\n\nconst BigC = styled.div`\n width: 100%;\n margin-bottom: 40px;\n padding-left:59px;\n font-family: \"Inter\", sans-serif;\n`;\n\n\nconst Main = styled.div`\n display: flex;\n width: 100%;\n margin-top:20px;\n`;\n\nconst Container = styled.div`\n width:700px;\n padding:30px 20px;\n border-radius:10px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n height:500px;\n`;\n\n\nconst Title = styled.div`\n font-size: 20px;\n text-transform: uppercase;\n\n color:#414141;\n`;\nconst TeamTitle = styled.div`\n font-family: 'Poppins';\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n display:flex;\n color: #7E7E7E;\n display:flex;\n align-items:center;\n`;\n\n\nconst Title2 = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n font-weight: bold;\n margin-bottom:20px;\n`;\n\n\nconst Legend = styled.div`\n display: flex;\n flex-direction: column;\n width: calc(100% - 730px);\n margin-left:30px;\n transition: all 500ms;\n height:100%;\n`;\n\n\nconst First = styled.div`\n display: flex;\n text-transform: uppercase;\n font-size: 20px;\n color: #414141;\n align-items: center;\n padding-left: 5px;\n margin-bottom: 10px;\n margin-top:19px;\n font-family: 'Poppins', sans-serif;\n\n`;\n\n\n\nconst Tabs = styled.div`\n display: flex;\n`;\n\nconst Tab = styled.div`\n padding: 5px;\n border-radius: 2px;\n margin-right: 10px;\n background-color: ${(props) => (props.selected ? \"#2d50e2\" : \"white\")};\n color: ${(props) => (props.selected ? \"white\" : \"#2d50e2\")};\n font-weight: ${(props) => (props.selected ? \"bold\" : 400)};\n font-family: \"Barlow Semi Condensed\", sans-serif;\n cursor: pointer;\n`;\n\n\nconst Card = styled.div`\n padding:30px;\n border-radius:10px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n height:500px;\n\n`\n\nconst CardTop = styled.div`\n display:flex;\n align-items:center;\n flex-direction:row;\n justify-content:space-between;\n margin-bottom: 40px;\n`\n\nconst Score = styled.div`\n font-family: \"Barlow Semi Condensed\", sans-serif;\n font-size:22px;\n font-weight:bold;\n display:flex;\n flex-direction:column;\n align-items:center;\n justify-content:center;\n\n`\n\nconst Sub = styled.div`\n font-size: 10px;\n font-weight: 400;\n`;\n\nconst Text = styled.div`\n font-size:14px;\n margin-top:5px;\n font-family: \"Barlow Semi Condensed\", sans-serif;\n margin-left:32px;\n`\n\nconst Diff = styled.span`\n font-size: 16px;\n display:flex;\n align-items:center;\n\n`\n\nconst ROW = styled.div`\n display:flex;\n `\n\n\nconst data3 = {\n series: [\n {\n name: \"Scores\",\n data: [9, 10, 8],\n },\n ],\n options: {\n chart: {\n type: \"bar\",\n fontFamily:\"Poppins, sans-serif\",\n foreColor: '#7E7E7E',\n toolbar: {\n show: false,\n },\n width: '100%',\n height: 400,\n },\n legend: {\n position: \"top\",\n horizontalAlign: \"left\",\n },\n plotOptions:{\n bar:{\n columnWidth:'50%',\n colors:{\n backgroundBarOpacity:1\n }\n }\n },\n colors: [\"#476DFA\"],\n xaxis: {\n labels: {\n rotate: -45,\n rotateAlways:true,\n offsetY:5,\n minHeight:110\n },\n categories: [\n \"Apples\",\n \"Oranges\",\n \"Strawberries\",\n \"Pineapples\",\n \"Mangoes\",\n \"Bananas\",\n \"Blackberries\",\n \"Pears\",\n \"Watermelons\",\n \"Cherries\",\n \"Pomegranates\",\n \"Tangerines\",\n \"Papayas\",\n ],\n tickPlacement: \"on\",\n },\n yaxis: {\n min: 0,\n max: 10,\n decimalsInFloat: 0,\n title: {\n text: \"Scores\",\n style:{\n fontWeight:400\n }\n },\n },\n },\n};\n","import styled from \"styled-components\";\nimport React from \"react\";\n\nimport OverviewGridOTP from \"./OverviewGrid\";\nimport OverviewGrid from \"./OverviewGrid2\";\nimport OverviewGrid1D from \"./OverviewGrid1D\";\n\nconst Overview = ({\n nav,\n data,\n refresh,\n structure,\n WhiteLabel,\n rule,\n questions,\n pdf = false,\n overview = false,\n otpPdf = false,\n selected,\n standards,\n otpView = false,\n language,\n pdfAnchor,\n}) => {\n const isOneDimensional = () => {\n return questions.dimensions.length === 1;\n };\n\n const selectOverview = () => {\n if (Number(WhiteLabel?.overview) === 1) {\n return (\n {selectOverview()} ;\n};\n\nexport default Overview;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n`;\n","import { ErrorBoundary } from \"react-error-boundary\";\nimport { Icon } from \"semantic-ui-react\";\nimport styled from \"styled-components\";\n\nfunction ButtonErrorWrapper({ error, resetErrorBoundary }) {\n const safety = () => {\n resetErrorBoundary();\n };\n\n return (\n \n safety()}>\n \n \n \n \n );\n}\n\nconst ErrorWrapper = (props) => {\n return (\n props.retryFunction}\n >\n {props.children}\n \n );\n};\n\nexport default ErrorWrapper;\n\nconst Container = styled.div`\n position: absolute;\n left: -25px;\n top: 0px;\n display: flex;\n align-items: center;\n flex-direction: row;\n height: 45px;\n justify-content: center;\n`;\n\nconst IconWrapper = styled.div`\n padding-right: 14;\n`;\n\nconst ErrorText = styled.div`\n width: 150px;\n display: flex;\n flex-direction: row;\n border-radius: 10px;\n color: #6a00ff;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n background-color: #ffffff;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n","import React, { useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Button, Loader } from \"semantic-ui-react\";\nimport PropTypes from \"prop-types\";\n\nconst OverviewOptions = (props) => {\n const {\n btnAction,\n showControl,\n setShowControl,\n btnText,\n setPdfGenerating,\n btnEnabled,\n downloadIcon,\n otpReport,\n isFrench,\n triggeredGenerate,\n pdfKey,\n } = props;\n\n const handleBtnPress = () => {\n setPdfGenerating(true);\n btnAction();\n setShowControl(false);\n };\n\n useEffect(() => {\n if (triggeredGenerate) {\n setPdfGenerating(true);\n if (btnEnabled) {\n btnAction();\n }\n setShowControl(false);\n }\n }, [triggeredGenerate, btnEnabled, pdfKey]);\n\n const generateBtn = downloadIcon ? (\n !btnEnabled || triggeredGenerate ? (\n handleBtnPress()}\n size=\"tiny\"\n icon=\"download\"\n />\n )\n ) : (\n handleBtnPress()}\n >\n {btnText}\n \n );\n\n const btnSection = !showControl ? null : generateBtn;\n\n if (!showControl) {\n return (\n \n \n );\n }\n\n return (\n \n \n {btnSection}\n \n {!btnEnabled && !downloadIcon && (\n \n Not enough data for the selected options or range.\n \n )}\n \n );\n};\n\nconst OptionsContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst ButtonContainer = styled.div`\n display: flex;\n width: ${(props) => (props.downloadIcon ? \"35px\" : \"210px\")};\n height: 24px;\n margin-left: ${(props) => (props.otpReport ? \"-8px\" : \"0px\")};\n padding-left: ${(props) => (props.downloadIcon ? \"5px\" : \"8px\")};\n`;\n\nconst ErrorLabel = styled.label`\n color: red;\n margin-left: ${(props) => (props.otpReport ? \"-8px\" : \"8px\")};\n font-size: 10px;\n`;\n\nOverviewOptions.propTypes = {\n selectOptions: PropTypes.array,\n pdfLink: PropTypes.element,\n btnAction: PropTypes.func,\n pdfLoading: PropTypes.bool,\n showControl: PropTypes.bool,\n btnText: PropTypes.string,\n};\n\nexport default OverviewOptions;\n","\n\nexport const feedback =[\n\t{\n\t\tq:0,\n\t\tfactor:0,\n\t\tid:0,\n\t\tquestion:'People feel safe sharing ideas, feedback, and opinions, even if they differ from others.',\n\t\tfeedback:['This is a strength of our team right now. I think most people are feeling comfortable in the environment to say something when they see something.',\n\t\t\t\t\t'Being new to the team I don’t feel like it is my place to say things to other people, I am not comfortable with my teammates yet. The older players kind of what it their way anyways.']\n\t},\n\t{\n\t\tq:3,\n\t\tfactor:4,\n\t\tid:0,\n\t\tquestion:'People receive the 1-on-1 support they need to grow. ',\n\t\tfeedback:['I like how the coaching staff has set up weekly times scheduled for us to meet with them. This gives us a time that we can ask questions and talk about ourselves.',\n\t\t\t\t\t'The coaches tell us the door is always open but when it comes time to get together, I find it hard to schedule a meeting or the staff isn’t available. It seems like more of a bother than anything else.']\n\t},\n\t{\n\t\tq:1,\n\t\tfactor:1,\n\t\tid:0,\n\t\tquestion:'Well-being is often compromised in in service of performance.',\n\t\tfeedback:['The therapy folks and the coaches have a good system to support us when it comes to injuries and things like that. It feels collaborative.',\n\t\t\t\t\t'There have been a few times where I felt like it was just better to not say anything and practice because I didn’t want to bring it up to anyone and cause problems.']\n\t},\n\t{\n\t\tq:4,\n\t\tfactor:2,\n\t\tid:0,\n\t\tquestion:'Our cohesion is a strength in competitive, pressure situations.',\n\t\tfeedback:['Our team seems to come together and trust each other when the going gets a little tough. We stick together. This might be one of our biggest strengths as a team last season.',\n\t\t\t\t\t'When we play games and we face adversity, everyone starts to do their own thing or just shut down completely. Sometimes I don’t see the point when it gets like that.']\n\t},\n\t{\n\t\tq:2,\n\t\tfactor:2,\n\t\tid:1,\n\t\tquestion:'People rarely get the feedback they need to improve',\n\t\tfeedback:['I like the routine at the beginning of the week when we debrief the weekend and talk about things we need to improve as a individuals and as a team.',\n\t\t\t\t\t'It always seems like coaches are too busy to give us feedback to improve. That time seems to be reserved more for the players that get to play a lot.']\n\t},\n\t{\n\t\tq:3,\n\t\tfactor:3,\n\t\tid:1,\n\t\tquestion:'When expectations or standards aren’t met, it is addressed ',\n\t\tfeedback:['The older players on the team have a good way of communicating this to the rest of us. This is something that we focus on as a team and most are receptive to it.',\n\t\t\t\t\t'I find this one confusing because our expectations and standards are always clear with everything so it is hard to address it, but it is a problem.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:5,\n\t\tid:1,\n\t\tquestion:'Communication is candid and transparent.',\n\t\tfeedback:['the players only chat is what makes me score this high for our culture. People are able to communicate and ask questions and someone always answers and helps the other players.',\n\t\t\t\t\t'The messages sometimes contradict each other. We get one thing one day and something else the next. It is hard to keep track about what we are doing and how we are supposed to do it.']\n\t}\n]\n\n\nexport const feedback2 = [\n\t{\n\t\tq:0,\n\t\tfactor:5,\n\t\tid:0,\n\t\tquestion:'I feel like I’m a part of our company culture.',\n\t\tfeedback:['It always feels like we have a collaborative approach to our culture and we all have a hand in creating it. This starts with the recruiting and hiring process that seems to include a focus on adding people that fit what we are trying to accomplish.',\n\t\t\t\t\t'2.\tThere are too many disconnects at different levels of leadership to score this question high and I don’t feel like I can be the one to change this. ']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:2,\n\t\tid:0,\n\t\tquestion:'This work environment allows for spontaneous collaboration to occur. ',\n\t\tfeedback:['I find this one to be a definite strength of our team! Being back in the office is helping this process and allows us to collaborate more frequently and efficiently.',\n\t\t\t\t\t'This has suffered since we have been in this hybrid model and schedules are all over the place. It’s hard to get a rhythm as we try to figure out these new work flows. ']\n\t},\n\t{\n\t\tq:3,\n\t\tfactor:0,\n\t\tid:0,\n\t\tquestion:'Ours is a culture where communication is candid and transparent.',\n\t\tfeedback:['The team of team approach to our company structure has really helped this area. We have trust within our close working groups so people feel comfortable to always speak candidly. ',\n\t\t\t\t\t'Often times messages contradict each other. The messages come down and get communicated a certain way one week, and then another the next week. Confusion ensues! ']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:1,\n\t\tid:1,\n\t\tquestion:'Our leaders prioritize the growth and development of others.',\n\t\tfeedback:['This is an obvious priority here. We have a great system in place to allow for growth and autonomy in this space. It is really encouraged and acted upon! ',\n\t\t\t\t\t'This is something we always talk about but it seems like everyone is too busy with their work to even think about growing or developing our roles.']\n\t},\n\t{\n\t\tq:1,\n\t\tfactor:0,\n\t\tid:1,\n\t\tquestion:'When expectations or standards aren’t met, it is addressed ',\n\t\tfeedback:['There is a lot of trust built up amongst the group and we are comfortable holding each other to the standards that we have set.',\n\t\t\t\t\t'The more senior employees tend to “get away” with much more than the the newer ones. People are hesitant to tell it like it is and jeopardize relationships.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:2,\n\t\tid:1,\n\t\tquestion:'It’s encouraged to be bold and take risks when solving problems here.',\n\t\tfeedback:['This is one of the main reasons I love working here, this area is extremely supported by the leadership.',\n\t\t\t\t\t'A lot of uncertainty by many about how the leaders are going to react based on decisions made by many of us. It is causing us to be paralyzed because no one wants to make a mistake.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:3,\n\t\tid:1,\n\t\tquestion:'When changes are being implemented, the impact of those changes on individuals is considered.',\n\t\tfeedback:['Since we are a small, tight-knit team, there is always lots of opportunity to provide feedback about the decisions that are being made. This is a huge strength of ours and why we have been able to be successful. ',\n\t\t\t\t\t'We are operating in such a fast pace environment that decisions are getting made often times without a lot of consideration of how to impacts the downward work flow. This is how it has been ever since I can remember.']\n\t}\n]\n\nexport const feedback3 = [\n\t{\n\t\tq:0,\n\t\tfactor:2,\n\t\tid:0,\n\t\tquestion:'This work environment allows for spontaneous collaboration to occur. ',\n\t\tfeedback:['I find this one to be a definite strength of our team! Being back in the office is helping this process and allows us to collaborate more frequently and efficiently.',\n\t\t\t\t\t'This has suffered since we have been in this hybrid model and schedules are all over the place. It’s hard to get a rhythm as we try to figure out these new work flows. ']\n\t},\n\t{\n\t\tq:3,\n\t\tfactor:0,\n\t\tid:0,\n\t\tquestion:'Ours is a culture where communication is candid and transparent.',\n\t\tfeedback:['The team of team approach to our company structure has really helped this area. We have trust within our close working groups so people feel comfortable to always speak candidly. ',\n\t\t\t\t\t'Often times messages contradict each other. The messages come down and get communicated a certain way one week, and then another the next week. Confusion ensues! ']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:1,\n\t\tid:1,\n\t\tquestion:'Our leaders prioritize the growth and development of others.',\n\t\tfeedback:['This is an obvious priority here. We have a great system in place to allow for growth and autonomy in this space. It is really encouraged and acted upon! ',\n\t\t\t\t\t'This is something we always talk about but it seems like everyone is too busy with their work to even think about growing or developing our roles.']\n\t},\n\t{\n\t\tq:1,\n\t\tfactor:0,\n\t\tid:1,\n\t\tquestion:'When expectations or standards aren’t met, it is addressed ',\n\t\tfeedback:['There is a lot of trust built up amongst the group and we are comfortable holding each other to the standards that we have set.',\n\t\t\t\t\t'The more senior employees tend to “get away” with much more than the the newer ones. People are hesitant to tell it like it is and jeopardize relationships.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:2,\n\t\tid:1,\n\t\tquestion:'It’s encouraged to be bold and take risks when solving problems here.',\n\t\tfeedback:['This is one of the main reasons I love working here, this area is extremely supported by the leadership.',\n\t\t\t\t\t'A lot of uncertainty by many about how the leaders are going to react based on decisions made by many of us. It is causing us to be paralyzed because no one wants to make a mistake.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:3,\n\t\tid:1,\n\t\tquestion:'When changes are being implemented, the impact of those changes on individuals is considered.',\n\t\tfeedback:['Since we are a small, tight-knit team, there is always lots of opportunity to provide feedback about the decisions that are being made. This is a huge strength of ours and why we have been able to be successful. ',\n\t\t\t\t\t'We are operating in such a fast pace environment that decisions are getting made often times without a lot of consideration of how to impacts the downward work flow. This is how it has been ever since I can remember.']\n\t},\n\t{\n\t\tq:0,\n\t\tfactor:3,\n\t\tid:1,\n\t\tquestion:'When changes are being implemented, the impact of those changes on individuals is considered.',\n\t\tfeedback:['Since we are a small, tight-knit team, there is always lots of opportunity to provide feedback about the decisions that are being made. This is a huge strength of ours and why we have been able to be successful. ',\n\t\t\t\t\t'We are operating in such a fast pace environment that decisions are getting made often times without a lot of consideration of how to impacts the downward work flow. This is how it has been ever since I can remember.']\n\t}\n]","import Categories from \"../survey_structure_blades.json\";\nimport Questions from \"../question_structure_2.json\";\nimport { feedback, feedback2, feedback3 } from \"./feedback\";\n\nfunction randn_bm(min, max, skew) {\n let u = 0,\n v = 0;\n while (u === 0) u = Math.random(); //Converting [0,1) to (0,1)\n while (v === 0) v = Math.random();\n let num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);\n\n num = num / 10.0 + 0.5; // Translate to 0 -> 1\n if (num > 1 || num < 0) num = randn_bm(min, max, skew);\n // resample between 0 and 1 if out of range\n else {\n num = Math.pow(num, skew); // Skew\n num *= max - min; // Stretch to fill range\n num += min; // offset to min\n }\n return num;\n}\n\nfunction randomIntFromInterval(min, max) {\n if (max == 0) {\n return 0;\n }\n // min and max included\n\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n\nconst dates = [\n \"March 4,2022\",\n \"March 4,2021\",\n \"March 4,2020\",\n \"March 4,2019\",\n \"March 4,2018\",\n \"March 4,2017\",\n \"March 4,2016\",\n \"March 4,2015\",\n \"March 4,2014\",\n \"March 4,2013\",\n];\n\nexport const Data_Generator = (points, history, categories, questions) => {\n let responses = [];\n\n for (let i = 0; i < history; i++) {\n let _package = { id: i + 1, date: dates[i], type: \"COC\" };\n\n let response_list = generate_responses(points, categories, questions);\n\n _package[\"responses\"] = response_list;\n\n responses.push(_package);\n }\n\n return responses;\n};\n\nconst getminMax = () => {\n let min = randomIntFromInterval(0, 8);\n let max = randomIntFromInterval(min + 1, 10);\n\n return [min, max];\n};\n\nconst generate_responses = (points, cats, questions, team, records) => {\n let responses = [];\n let num_feedback = 0;\n let secondary_length = cats.categories.find((f) => f.priority == \"secondary\")\n .options.length;\n let min_max = Array.from({ length: secondary_length }, (_, i) => i + 1).map(\n (item) => getminMax()\n );\n let skew = (val) => randomIntFromInterval(0, 101) / 40;\n for (let i = 0; i < points; i++) {\n let resp = { id: i + 1, categories: [], questions: [] };\n cats.categories.map((item, idx) => {\n let selection = randomIntFromInterval(0, item.options.length - 1);\n //Check selection subfactor existance\n let subfactor = null;\n if (\"subfactors\" in item.options[selection]) {\n if (item.options[selection].subfactors.length > 0) {\n subfactor = randomIntFromInterval(\n 0,\n item.options[selection].subfactors.length - 1\n );\n }\n }\n\n resp.categories.push({\n id: item.id,\n response: item.options[selection].id,\n subfactor:\n subfactor !== null\n ? item.options[selection].subfactors[subfactor].id\n : subfactor,\n priority: item.priority,\n });\n });\n\n let secondary = cats.categories\n .find((f) => f.priority == \"secondary\")\n .options.findIndex(\n (f) =>\n f.id ==\n resp.categories.find((f) => f.priority == \"secondary\").response\n );\n\n questions.dimensions.map((item, idx) => {\n let dimension = idx;\n let score = randn_bm(\n min_max[secondary][0],\n min_max[secondary][1],\n skew(idx)\n );\n item.factors.map((f, f_id) => {\n let factor = f_id;\n f.questions.map((q, q_id) => {\n resp.questions.push({\n id: dimension,\n factor,\n q: q_id,\n response: Math.floor(score),\n ques_order: resp.questions.length + 1,\n });\n });\n });\n });\n\n if (num_feedback < 14 && team == 0 && questions.type == 2) {\n let pos = num_feedback % 2;\n let fee = feedback[Math.floor(num_feedback / 2)];\n let val = pos === 0 ? 8 : 2;\n resp.feedback = [\n {\n q: fee.q,\n factor: fee.factor,\n question: fee.question,\n id: fee.id,\n feedback: fee.feedback[pos],\n response: val,\n },\n ];\n num_feedback += 1;\n }\n if (num_feedback < 14 && team == 0 && questions.type == 3) {\n let pos = num_feedback % 2;\n let fee = feedback2[Math.floor(num_feedback / 2)];\n let val = pos === 0 ? 8 : 2;\n resp.feedback = [\n {\n q: fee.q,\n factor: fee.factor,\n question: fee.question,\n id: fee.id,\n feedback: fee.feedback[pos],\n response: val,\n },\n ];\n num_feedback += 1;\n }\n\n if (num_feedback < 14 && team == 0 && questions.type == 4) {\n let pos = num_feedback % 2;\n let fee = feedback3[Math.floor(num_feedback / 2)];\n let val = pos === 0 ? 8 : 2;\n resp.feedback = [\n {\n q: fee.q,\n factor: fee.factor,\n question: fee.question,\n id: fee.id,\n feedback: fee.feedback[pos],\n response: val,\n },\n ];\n num_feedback += 1;\n }\n\n resp[\"survey_personality\"] = generate_personality();\n resp[\"employee_records\"] = generate_records(records);\n\n responses.push({ employee_id: 0, response: resp });\n }\n\n return responses;\n};\n\nfunction randomValueBetween(min, max) {\n return Math.random() * (max - min) + min;\n}\n\nfunction randomDate(date1, date2) {\n var date1 = date1 || \"01-01-1970\";\n var date2 = date2 || new Date().toLocaleDateString();\n date1 = new Date(date1).getTime();\n date2 = new Date(date2).getTime();\n if (date1 > date2) {\n return new Date(randomValueBetween(date2, date1)).toLocaleDateString();\n } else {\n return new Date(randomValueBetween(date1, date2)).toLocaleDateString();\n }\n}\n\nexport const Data_GeneratorV2 = (\n points,\n response_numbers,\n categories,\n questions,\n records = []\n) => {\n let responses = [];\n\n let sport_list = categories.categories.find(\n (f) => f.priority == \"primary\"\n ).options;\n let number_of_teams = sport_list.length;\n\n for (let i = 0; i < number_of_teams; i++) {\n for (let r = 0; r < response_numbers; r++) {\n let date = randomDate(\"02/13/2021\", \"05/01/2022\");\n let _package = {\n id: i + 1,\n date: date,\n type: \"COC\",\n name: sport_list[i].name,\n };\n\n let response_list = generate_responses(\n points,\n categories,\n questions,\n i,\n records\n );\n\n _package[\"responses\"] = response_list;\n\n responses.push(_package);\n }\n }\n\n return responses.sort(\n (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()\n );\n};\n\nconst generate_personality = () => {\n let personality = {};\n let values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n values.map((item) => {\n personality[item] = { question: item, response: randomValueBetween(1, 7) };\n });\n\n return personality;\n};\n\nconst generate_records = (records) => {\n return records.map((item) => {\n let value;\n if (item.name == \"Salary\") {\n value = randomValueBetween(30000, 200000);\n } else {\n value = randomValueBetween(1, 20);\n }\n return { name: item.name, id: item.id, value };\n });\n};\n","export default __webpack_public_path__ + \"static/media/logo_white.344ef4e3.png\";","export default __webpack_public_path__ + \"static/media/il-logo.cb45a14c.png\";","export default __webpack_public_path__ + \"static/media/stats-container.47bc4cc7.png\";","export default __webpack_public_path__ + \"static/media/pdf-bg.f21bb407.png\";","import React from \"react\";\nimport { View, Text, Image, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\nimport format from \"date-fns/format\";\n\nimport coverImage from \"assets/images/logo_white.png\";\nimport ilLogo from \"assets/images/il-logo.png\";\nimport statsContainer from \"../assets/stats-container.png\";\nimport pdfBg from \"assets/images/pdf-bg.png\";\n\nconst Intro = (props) => {\n let imgCover;\n let coverTitle;\n let subtitle;\n let reportType;\n let templateType = 1;\n let orgSuffix;\n\n if (props.config?.[0].data) {\n const { coverSubtitle, coverImage, coverHeading, type, introTemplate } =\n props.config?.[0].data;\n templateType = (introTemplate && introTemplate) || 1;\n imgCover = coverImage && coverImage !== \"DEFAULT\" ? coverImage : null;\n subtitle = (coverSubtitle && coverSubtitle) || \"PDF summary report\";\n coverTitle = (coverHeading && coverHeading) || \"Sport Culture Index\";\n reportType = (type && type) || \"Culture Audit\";\n }\n\n if (props.selectedReport) {\n orgSuffix = `/ ${props.selectedReport.name}`;\n }\n\n if (props.overview) {\n orgSuffix =\n props.anchor.name.toLowerCase() === \"sport\"\n ? \"- All sports\"\n : \"- Average of all sports\";\n }\n\n const styles = StyleSheet.create({\n page: {\n position: \"relative\",\n height: \"100vh\",\n backgroundColor: \"#F0F5FE\",\n color: \"#2C3644\",\n },\n textarea: {\n position: \"absolute\",\n top: \"10%\",\n left: 80,\n color: \"#2C3644\",\n },\n title: {\n fontWeight: 700,\n fontSize: 30,\n width: 350,\n lineHeight: 1.2,\n paddingTop: 100,\n },\n subSection: {\n position: \"absolute\",\n bottom: \"10%\",\n left: 80,\n },\n subTitle: {\n fontSize: 12,\n width: 350,\n lineHeight: 1.2,\n },\n sportName: {\n fontSize: 14,\n fontWeight: 500,\n marginTop: 15,\n marginBottom: 170,\n },\n bottom: {\n width: \"100vw\",\n height: 150,\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-evenly\",\n alignItems: \"flex-end\",\n position: \"absolute\",\n bottom: 0,\n },\n bar: {\n width: 7,\n borderRadius: 2.5,\n },\n sub1: {\n fontSize: 18,\n fontWeight: 500,\n marginTop: 15,\n },\n img: {\n width: 150,\n marginLeft: -10,\n marginBottom: 75,\n },\n });\n\n const bars = [\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28,\n ];\n const colors = [\"#2C6CF5\", \"#2E34D0\", \"#3008B2\"];\n\n const getReportDetails = (reportData, orgName) => {\n const detailsObj = [];\n\n // Organization Name Details Stat\n if (orgName) {\n detailsObj.push(\n \n \n Organization name: \n \n {orgName} {orgSuffix}\n \n \n \n );\n }\n\n // Report Type Details Stat\n detailsObj.push(\n \n \n Report type: \n {/* Get value from prop when more audits are added. */}\n \n {reportData?.type_of || \"Culture Audit\"}\n \n \n \n );\n\n // Responses Details Stat\n if (reportData?.responses) {\n detailsObj.push(\n \n \n # of respondents: \n {props.totalResponses} \n \n \n );\n }\n\n // Date Details Stat\n if (reportData?.date) {\n detailsObj.push(\n \n \n Survey close date: \n \n {formatReportDate(reportData.date)}\n \n \n \n );\n }\n\n return detailsObj;\n };\n\n const formatReportDate = (dateTime) => {\n return format(dateTime, \"MMMM do, yyyy\");\n };\n\n const introImg = (imgSrc, header, subtitle, sportName) => {\n return (\n \n \n \n {header && (\n \n {header.toUpperCase()} \n {subtitle} \n \n )}\n \n {(templateType === 1 && (\n \n \n \n \n {getReportDetails(props.selectedReport, props.selectedOrg)}\n \n \n )) || (\n // Placeholder for stats container.\n \n {getReportDetails(props.selectedReport, props.selectedOrg)}\n \n )}\n \n \n \n \n );\n };\n\n const introReport =\n templateType === 2 ? (\n \n {introImg(imgCover, coverTitle, subtitle, props.sportName)}\n \n ) : (\n \n \n Culture Index \n \n Overview and Key Findings\n \n {props.sportName && !props.overview && (\n {props.sportName} \n )}\n \n \n \n Generated by innerlogic for {props.selectedOrg} on \n {formatReportDate(new Date())}\n \n \n\n {/* \n {bars.map((item) => (\n */}\n\n \n \n \n );\n\n return (\n \n {introReport} \n \n );\n};\n\nIntro.propTypes = {\n companyLogo: PropTypes.string,\n introTemplate: PropTypes.number,\n coverImage: PropTypes.string,\n coverHeading: PropTypes.string,\n coverSubtitle: PropTypes.string,\n metadata: PropTypes.object,\n};\n\nexport default Intro;\n","import ApexCharts from \"apexcharts\";\n\nvar SentimentAnalysis = require(\"sentiment\");\nvar sentiment = new SentimentAnalysis();\n\nconst scoring = {\n 0: 10,\n 1: 9,\n 2: 8,\n 3: 7,\n 4: 6,\n 5: 5,\n 6: 4,\n 7: 3,\n 8: 2,\n 9: 1,\n 10: 0,\n};\n\nexport const reverseScore = (s, r) => {\n if (r) {\n return scoring[s];\n }\n\n return s;\n};\n\nexport const calculate_score = (s, structure) => {\n let score = 0;\n let total = 0;\n s.questions.map((q) => {\n let reverse =\n structure.dimensions[q.id].factors[q.factor].questions[q.q]?.reverse;\n score += reverseScore(q.response, reverse);\n total += 1;\n\n return null;\n });\n\n return score / total;\n};\n\nexport const getFeedback = (\n currQuestion,\n categories,\n filter_data,\n structure\n) => {\n let _data = [];\n filter_data?.[0]\n .filter((f) => \"comments\" in f)\n .filter((f) => f.comments.length > 0)\n .map((item) => {\n //calculate the overall score for this user\n let score = calculate_score(item, structure);\n let primary = categories.categories\n .find((f) => f.priority === \"primary\")\n .options.find(\n (f) =>\n f.id ===\n item.categories.find((x) => x.priority === \"primary\").response\n ).name;\n let secondary = categories.categories\n .find((f) => f.priority === \"secondary\")\n .options.find(\n (f) =>\n f.id ===\n item.categories.find((x) => x.priority === \"secondary\").response\n ).name;\n\n item.comments\n .filter((f, i) => i === currQuestion)\n .map((c) => {\n let sent = sentiment.analyze(c.response);\n let sent_score =\n sent.calculation.length > 0\n ? sent.score / sent.calculation.length\n : sent.score;\n let risk = 50 - score * 5 + (sent_score * -1 + 5) * 5;\n\n _data.push({\n text: c.response,\n primary,\n secondary,\n risk: Math.floor(risk),\n sentiment: sent_score,\n });\n });\n });\n return _data.sort((a, b) => b.risk - a.risk);\n};\n\nexport const getFeedbackOTP = (filterData, structure, categories, question) => {\n let _data = [];\n let filterDataUse = filterData?.filter_data\n ? filterData?.filter_data\n : filterData;\n if (filterDataUse && filterDataUse.length > 0) {\n filterDataUse[0]\n .filter((f) => \"comments\" in f)\n .filter((f) => f?.comments?.length > 0)\n .map((item) => {\n //calculate the overall score for this user\n let score = calculate_score(item, structure);\n let primary = categories.categories\n .find((f) => f.priority === \"primary\")\n .options.find(\n (f) =>\n f.id ===\n item.categories.find((x) => x.priority === \"primary\").response\n ).name;\n let secondary = categories.categories\n .find((f) => f.priority === \"secondary\")\n .options.find(\n (f) =>\n f.id ===\n item.categories.find((x) => x.priority === \"secondary\").response\n )?.name;\n\n item.comments\n .filter((c) => c.ques_order === question)\n .map((c) => {\n let sent = sentiment.analyze(c.response);\n let sent_score =\n sent.calculation.length > 0\n ? sent.score / sent.calculation.length\n : sent.score;\n let risk = 50 - score * 5 + (sent_score * -1 + 5) * 5;\n\n _data.push({\n text: c.response,\n primary,\n secondary,\n risk: Math.floor(risk),\n sentiment: sent_score,\n });\n });\n });\n\n return _data.sort((a, b) => b.risk - a.risk);\n }\n return _data;\n};\n\nconst _options = {\n series: [\n {\n name: \"Series 1\",\n data: [20, 100, 40, 30, 50, 60],\n },\n ],\n chart: {\n width: 500,\n type: \"radar\",\n id: \"chart\",\n toolbar: {\n show: false,\n },\n },\n dataLabels: {\n enabled: true,\n },\n plotOptions: {\n radar: {\n size: 300,\n polygons: {\n strokeColors: \"#e9e9e9\",\n fill: {\n colors: [\"#f8f8f8\", \"#fff\"],\n },\n },\n },\n },\n\n colors: [\"#2d50e2\"],\n markers: {\n size: 4,\n colors: [\"#fff\"],\n strokeColor: \"#2d50e2\",\n strokeWidth: 2,\n },\n tooltip: {\n y: {\n formatter: function (val) {\n return val;\n },\n },\n },\n xaxis: {\n categories: [\n \"Safety\",\n \"Well-being\",\n \"Cohesion\",\n \"Empowerment\",\n \"Personalization\",\n \"Belonging\",\n ],\n labels: {\n style: {\n fontSize: \"20px\",\n fontWeight: \"bold\",\n fontFamily: \"Barlow Semi Condensed, sans-serif\",\n colors: [\"black\", \"black\", \"black\", \"black\", \"black\", \"black\"],\n },\n },\n },\n yaxis: {\n tickAmount: 7,\n labels: {\n formatter: function (val, i) {\n if (i % 2 === 0) {\n return val;\n } else {\n return \"\";\n }\n },\n },\n },\n};\n\nconst _data = [\n {\n average: 3,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"1\",\n dimension: 0,\n stdev: 3,\n n: 2,\n },\n {\n average: 3,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"1\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 3.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"4\",\n dimension: 0,\n stdev: 2.5,\n n: 2,\n },\n {\n average: 3.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"0\",\n dimension: 1,\n stdev: 2.5,\n n: 2,\n },\n {\n average: 4,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"0\",\n dimension: 0,\n stdev: 3,\n n: 2,\n },\n {\n average: 4,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"1\",\n dimension: 0,\n stdev: 3,\n n: 2,\n },\n {\n average: 4,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"2\",\n dimension: 1,\n stdev: 2,\n n: 2,\n },\n {\n average: 5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"1\",\n dimension: 1,\n stdev: 2,\n n: 2,\n },\n {\n average: 5.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"3\",\n dimension: 0,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 6,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"3\",\n dimension: 0,\n stdev: 1,\n n: 2,\n },\n {\n average: 6,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"2\",\n dimension: 1,\n stdev: 2,\n n: 2,\n },\n {\n average: 6.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"0\",\n dimension: 0,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 6.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"0\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 6.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"3\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"1\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"1\",\n dimension: 0,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"2\",\n dimension: 0,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"3\",\n dimension: 0,\n stdev: 1,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"3\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"4\",\n dimension: 0,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"1\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"1\",\n dimension: 1,\n stdev: 1,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"2\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"3\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 7,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"4\",\n dimension: 1,\n stdev: 2,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"2\",\n dimension: 0,\n stdev: 2.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"2\",\n dimension: 0,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"4\",\n dimension: 0,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"0\",\n dimension: 1,\n stdev: 2.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"1\",\n dimension: 1,\n stdev: 2.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"1\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"3\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 7.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"3\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"0\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"0\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"2\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"2\",\n dimension: 0,\n stdev: 1,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"3\",\n dimension: 0,\n stdev: 1,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"4\",\n dimension: 0,\n stdev: 2,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"4\",\n dimension: 0,\n stdev: 0,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"0\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 8,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"2\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"2\",\n section: \"0\",\n dimension: 1,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"2\",\n dimension: 1,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"0\",\n section: \"4\",\n dimension: 1,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"1\",\n section: \"4\",\n dimension: 1,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"3\",\n section: \"4\",\n dimension: 1,\n stdev: 0.5,\n n: 2,\n },\n {\n average: 8.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"4\",\n dimension: 1,\n stdev: 1.5,\n n: 2,\n },\n {\n average: 9,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"3\",\n dimension: 1,\n stdev: 0,\n n: 2,\n },\n {\n average: 9.5,\n label: {\n id: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n name: \"Track and Field (W)\",\n color: \"#66cc70\",\n },\n distribution: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],\n role: \"364733f4-e9d2-4d5d-b3e5-c9444551efe3\",\n question: \"4\",\n section: \"0\",\n dimension: 0,\n stdev: 0.5,\n n: 2,\n },\n];\n\nconst _questions = {\n title: \"Culture of excellence audit tool\",\n dimensions: [\n {\n id: 1,\n title: \"Human Factors\",\n factors: [\n {\n id: 1,\n title: \"Safety\",\n questions: [\n {\n q: \"People feel safe sharing ideas, feedback and opinions on this team, even if they differ from others.\",\n id: 1,\n role: null,\n reverse: false,\n },\n {\n q: \"If I have concerns about harassment or safety on this team, I know what to do (i.e. where to go, who to talk to).\",\n id: 11,\n role: null,\n reverse: false,\n },\n {\n q: \"Harassment is tolerated on this team.\",\n id: 21,\n role: null,\n reverse: true,\n },\n {\n q: \"Physical safety is taken seriously on this team.\",\n id: 31,\n role: null,\n reverse: false,\n },\n {\n q: \"People in positions of power on this team use that power inappropriately.\",\n id: 41,\n role: null,\n reverse: true,\n },\n ],\n },\n {\n id: 2,\n title: \"Well-being\",\n questions: [\n {\n q: \"Our team demonstrates genuine care for mental health and well-being.\",\n id: 2,\n role: null,\n reverse: false,\n },\n {\n q: \"Sometimes I feel that my physical health is compromised in service of performance.\",\n id: 12,\n role: null,\n reverse: true,\n },\n {\n q: \"I feel unsupported or undermined in my spiritual beliefs on this team.\",\n id: 22,\n role: null,\n reverse: true,\n },\n {\n q: \"My involvement on this team helps me feel fulfilled.\",\n id: 32,\n role: null,\n reverse: false,\n },\n {\n q: \"My personal values often conflict with the values of this team.\",\n id: 42,\n role: null,\n reverse: true,\n },\n ],\n },\n {\n id: 3,\n title: \"Cohesion\",\n questions: [\n {\n q: \"I feel respected and cared for by the people on this team.\",\n id: 3,\n role: null,\n reverse: null,\n },\n {\n q: \"Even outside of the sport context, I feel a strong social connection to many people on this team.\",\n id: 13,\n role: null,\n reverse: null,\n },\n {\n q: \"People on this team spend time together outside of sport.\",\n id: 23,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team works well together when pursuing a goal.\",\n id: 33,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team cohesion is a strength in competitive situations.\",\n id: 43,\n role: null,\n reverse: null,\n },\n ],\n },\n {\n id: 4,\n title: \"Empowerment\",\n questions: [\n {\n q: \"I am empowered to take action in my role.\",\n id: 4,\n role: null,\n reverse: null,\n },\n {\n q: \"I am given the space to make decisions about my own development and performance.\",\n id: 14,\n role: null,\n reverse: null,\n },\n {\n q: \"On this team, people are regularly encouraged to make meaningful contributions.\",\n id: 24,\n role: null,\n reverse: null,\n },\n {\n q: \"I wish we focused more on people’s strengths on this team.\",\n id: 34,\n role: null,\n reverse: true,\n },\n {\n q: \"I have confidence in the abilities and attributes I bring to this team.\",\n id: 44,\n role: null,\n reverse: null,\n },\n ],\n },\n {\n id: 5,\n title: \"Personalization\",\n questions: [\n {\n q: \"This team cares about me as a person.\",\n id: 5,\n role: null,\n reverse: null,\n },\n {\n q: \"This team takes an individualized approach to growth and development.\",\n id: 15,\n role: null,\n reverse: null,\n },\n {\n q: \"This team understands everybody’s unique strengths and weaknesses.\",\n id: 25,\n role: null,\n reverse: null,\n },\n {\n q: \"Too often, a one-size-fits-all approach is used on this team.\",\n id: 35,\n role: null,\n reverse: true,\n },\n {\n q: \"This team values individual differences and diversity.\",\n id: 45,\n role: null,\n reverse: null,\n },\n ],\n },\n ],\n },\n {\n id: 2,\n title: \"Impact Factors\",\n factors: [\n {\n id: 1,\n title: \"Vision\",\n questions: [\n {\n q: \"Our team has a clear and compelling vision (i.e., ultimate goal or desired outcome).\",\n id: 6,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team’s vision is supported by a great strategy to achieve it.\",\n id: 16,\n role: null,\n reverse: null,\n },\n {\n q: \"We take an intentional approach (i.e., thoughtful planning and preparation) to pursuing our vision.\",\n id: 26,\n role: null,\n reverse: null,\n },\n {\n q: \"We revisit our team vision often in our environment.\",\n id: 36,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team lacks a clear and compelling vision of what ultimate success would look like for us.\",\n id: 46,\n role: null,\n reverse: true,\n },\n ],\n },\n {\n id: 2,\n title: \"Identiy\",\n questions: [\n {\n q: \"As a team, we’ve identified a shared set of core values.\",\n id: 7,\n role: null,\n reverse: null,\n },\n {\n q: \"People on this team are bought-in to the way we do things.\",\n id: 17,\n role: null,\n reverse: null,\n },\n {\n q: \"Our actions consistently align with our team’s core values.\",\n id: 27,\n role: null,\n reverse: null,\n },\n {\n q: \"I know what we stand for on this team.\",\n id: 37,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team lacks a distinct identity.\",\n id: 47,\n role: null,\n reverse: true,\n },\n ],\n },\n {\n id: 3,\n title: \"Climate\",\n questions: [\n {\n q: \"I find our environment optimistic and growth-oriented.\",\n id: 8,\n role: null,\n reverse: null,\n },\n {\n q: \"I am challenged to get better in this environment.\",\n id: 18,\n role: null,\n reverse: null,\n },\n {\n q: \"I rarely get the feedback I need to improve on this team.\",\n id: 28,\n role: null,\n reverse: true,\n },\n {\n q: \"Our team environment ignites engagement and motivation.\",\n id: 38,\n role: null,\n reverse: null,\n },\n {\n q: \"Optimal learning conditions and approaches are a priority in our environment.\",\n id: 48,\n role: null,\n reverse: null,\n },\n ],\n },\n {\n id: 4,\n title: \"Accountability\",\n questions: [\n {\n q: \"Holding others accountable is a strength of our leadership team.\",\n id: 9,\n role: null,\n reverse: null,\n },\n {\n q: \"People hold each other accountable on this team\",\n id: 19,\n role: null,\n reverse: null,\n },\n {\n q: \"The expectations and standards on this team are unclear.\",\n id: 29,\n role: null,\n reverse: true,\n },\n {\n q: \"When expectations or standards aren’t met on this team, it is addressed.\",\n id: 39,\n role: null,\n reverse: null,\n },\n {\n q: \"I believe it’s important to hold myself accountable on this team.\",\n id: 49,\n role: null,\n reverse: null,\n },\n ],\n },\n {\n id: 5,\n title: \"Adaptability\",\n questions: [\n {\n q: \"Our team responds well to changing or unpredictable conditions.\",\n id: 10,\n role: null,\n reverse: null,\n },\n {\n q: \"When things change unexpectedly, our team adapts well.\",\n id: 20,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team quickly pivots and changes course in the face of unexpected circumstances.\",\n id: 30,\n role: null,\n reverse: null,\n },\n {\n q: \"Our team misses out on important opportunities because we are too slow to react.\",\n id: 40,\n role: null,\n reverse: true,\n },\n {\n q: \"Our team strives to innovate and be ahead of the curve.\",\n id: 50,\n role: null,\n reverse: null,\n },\n ],\n },\n ],\n },\n ],\n type: 2,\n type_name: \"Innerlogic\",\n comments: null,\n};\n\nconst getAverage = (d) => {\n let scores = 0;\n let total = 0;\n d.map((item) => {\n scores += item.average * item.n;\n total += item.n;\n });\n return scores / total;\n};\n\nconst getOptions = (dimension = 0) => {\n let factors = _questions.dimensions[dimension].factors.map(\n (item) => item.title\n );\n let __options = _options;\n __options.xaxis.categories = factors;\n\n let series = [\n {\n name: \"Series 1\",\n data: factors.map((item, i) => {\n return getAverage(\n _data.filter(\n (f) => f.dimension == dimension && Number(f.section) == i\n )\n );\n }),\n },\n ];\n\n __options.series = series;\n\n return __options;\n};\n\nexport const getSpiderChartURI = async () => {\n return await ApexCharts.exec(\"chart\", \"dataURI\").then(({ imgURI }) => {\n return imgURI;\n });\n};\n\nexport const getGrade = (avgScore, reverse = false) => {\n const score = reverse ? 100 - avgScore : avgScore;\n\n if (score >= 90) {\n return \"A+\";\n }\n if (score >= 85) {\n return \"A\";\n }\n if (score >= 80) {\n return \"A-\";\n }\n if (score >= 77) {\n return \"B+\";\n }\n if (score >= 73) {\n return \"B\";\n }\n if (score >= 70) {\n return \"B-\";\n }\n if (score >= 67) {\n return \"C+\";\n }\n if (score >= 63) {\n return \"C\";\n }\n if (score >= 60) {\n return \"C-\";\n }\n if (score >= 50) {\n return \"D\";\n }\n\n return \"F\";\n};\n\nexport const getColorGrade = (avgScore, reverse = false) => {\n const score = reverse ? 100 - avgScore : avgScore;\n if (score >= 73) {\n return \"rgba(54, 224, 38, .85)\";\n }\n if (score >= 50) {\n return \"rgba(255, 191, 0, .85)\";\n }\n\n return \"rgba(224, 44, 38, 0.75)\";\n};\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TH: {\n fontSize: 10,\n textTransform: \"uppercase\",\n color: \"white\",\n fontWeight: 500,\n padding: 3,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n H1: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n marginBottom: 30,\n },\n});\n\nconst Table = ({\n data,\n headerColor,\n wrapRow = true,\n hideReverseText = true,\n isSportLaw,\n}) => {\n return (\n \n \n \n {data.rows.map((item) => (\n \n {item.title} \n \n ))}\n \n \n {data.data.map((item, x) => {\n return (\n \n {item.map((row, i) => (\n \n {row} \n \n ))}\n \n );\n })}\n \n \n {/* {!hideReverseText && (\n \n **These scores are reversed scored but are presented as they were\n answered\n \n )} */}\n \n );\n};\n\nexport default Table;\n","import React from \"react\";\nimport { Text, View, StyleSheet } from \"@react-pdf/renderer\";\nimport { getGrade } from \"../utils/cultureUtils\";\nimport Table from \"./Table\";\n\nconst Segmentation = (props) => {\n const {\n categories,\n calculated,\n hideText = false,\n dummyData,\n config,\n rule,\n subSelected,\n wrap = false,\n previous,\n } = props;\n\n const average = (array) => {\n let total = 0;\n let n = 0;\n array.map((item) => {\n total += item != null ? item : 0;\n n += item != null ? 1 : 0;\n });\n\n if (!total) {\n return 0;\n }\n\n return total / n;\n };\n\n const get_question_total = (data) => {\n if (data.length > 0) {\n return average(\n data\n .map((item) => {\n return item.questions.map((question) => question.response);\n })\n .flat()\n );\n }\n return 0;\n };\n\n const get_last_total = (data) => {\n if (data.length === 0) {\n return 0;\n }\n\n return average(\n data?.map((item) => {\n const q = item.questions.find((f) => {\n return true;\n })?.response;\n\n return q;\n })\n );\n };\n\n const get_cat_average = (cat, data, anchor) => {\n return get_question_total(\n data.filter((f) => {\n return f.categories.find((f) => f.id === anchor)?.response === cat;\n })\n );\n };\n\n const getRoleName = (anchor, id) => {\n if (!subSelected) {\n return categories.categories\n .find((f) => f.id === anchor)\n .options.find((f) => f.id === id).name;\n } else {\n const found = calculated[0].lookup.find((match) => {\n return match.id === id;\n });\n return found.label;\n }\n };\n\n return calculated.map((item, i) => {\n if (i > 3) {\n return null;\n }\n const tableData = Object.keys(item.data).map((k) => {\n const useRule = isNaN(rule) ? 2 : rule;\n if (item.data[k].n1 > useRule) {\n // const change = previous?.overall\n // ? get_cat_average(k, previous, item.id) * 10\n // : 0;\n\n const change = previous?.overall ? average(previous?.overall) * 10 : 0;\n\n try {\n return [\n `${getRoleName(item.id, k)}`,\n `${item.data[k].n1}`,\n `${((item.data[k].total / item.data[k].n) * 10).toFixed(0)}%`,\n `${\n change\n ? `${Math.floor(\n (item.data[k].total / item.data[k].n) * 10 - change\n )}%`\n : \"--\"\n }`,\n ];\n } catch {\n return null;\n }\n }\n return null;\n });\n\n // Filter out any empty results and show table data only if\n // data is available.\n if (tableData.filter((item) => item !== null).length === 0) {\n return null;\n }\n\n // get_cat_average\n const tableTemplate = [\n { title: `${item.name}`, width: \"33.3%\" },\n { title: \"Sample Size\", width: \"33.3%\" },\n { title: \"Score\", width: \"16.65%\" },\n { title: \"Change\", width: \"16.65%\" },\n ];\n\n const tableContent = {\n rows: tableTemplate,\n data: tableData,\n };\n\n // sort table data\n function sortFunction(a, b) {\n if (a[0] === b[0]) {\n return 0;\n } else {\n return a[0] < b[0] ? -1 : 1;\n }\n }\n\n // update the table content with sorted data\n tableContent.data = tableContent?.data\n ?.filter((arr) => arr && arr?.length > 0)\n ?.sort(sortFunction);\n\n return (\n \n {!hideText && (\n \n \n Table {i + 1}. {item.name}\n \n {/* \n These grades are calculated based on traditional school grading (B\n is equal to 83-86%) scales. They are designed to give an intuitive\n sense of the overall scoring.\n */}\n \n )}\n
\n \n );\n });\n};\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n color: \"#2C3644\",\n },\n container: {\n paddingBottom: 5,\n },\n});\n\nexport default Segmentation;\n","import React from \"react\";\nimport { View, StyleSheet, Svg, Polygon } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n pages: {\n position: \"absolute\",\n left: 0,\n top: 0,\n height: \"100vh\",\n width: 20,\n zIndex: 1,\n },\n shape1: {\n height: 100,\n width: 20,\n backgroundColor: \"#2B6EDF\",\n },\n});\n\nconst Side = (props) => {\n const { sideBarColors, isSportLaw } = props;\n\n return (\n \n {isSportLaw ? (\n <>\n \n \n \n \n \n ) : (\n <>\n \n \n \n \n \n )}\n \n );\n};\n\nexport default Side;\n","import React from \"react\";\nimport { View, Text, Image, StyleSheet, Page } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n footer: {\n position: \"absolute\",\n bottom: 0,\n width: \"100vw\",\n padding: 20,\n paddingHorizontal: 40,\n fontSize: 8,\n zIndex: -1,\n },\n line: {\n height: 0.2,\n width: \"100%\",\n backgroundColor: \"grey\",\n marginBottom: 10,\n },\n});\n\nconst Footer = (props) => {\n const { footerTextOne, footerTextTwo } = props;\n\n return (\n \n \n \n {footerTextOne} \n {footerTextTwo} \n \n \n `Page ${pageNumber} of ${totalPages}`\n }\n />\n \n \n );\n};\n\nexport default Footer;\n","export default __webpack_public_path__ + \"static/media/Poppins-Light.7641a0f7.ttf\";","import React from \"react\";\nimport { View, Text, StyleSheet, Font, Page } from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\nimport Segmentation from \"../components/Segmentation\";\nimport { calculate_table_data } from \"../../../reports/Audit/data_navigation/calculate_data\";\nimport Side from \"../components/Side\";\nimport Footer from \"../components/Footer\";\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\n\n/**\n *\n * @param {description: string, factors: string} props\n *\n * @returns\n */\nconst Methodology = (props) => {\n const {\n nav,\n categories,\n rule,\n structure,\n data,\n anchor,\n config,\n previous,\n questions,\n } = props;\n\n // Create styles\n const styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n color: \"#2C3644\",\n },\n page: {\n width: \"100%\",\n height: \"100vh\",\n position: \"relative\",\n padding: 60,\n color: \"#2C3644\",\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 15,\n lineHeight: 1.7,\n color: \"#2C3644\",\n },\n p2: {\n fontSize: 9,\n marginBottom: 10,\n color: \"#2C3644\",\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n fontWeight: 700,\n fontSize: 14,\n marginTop: 15,\n color: \"#2C3644\",\n },\n section: {\n paddingTop: 10,\n paddingBottom: 10,\n paddingLeft: 20,\n paddingRight: 20,\n backgroundColor: \"#F0F5FE\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 16,\n color: \"#2C3644\",\n },\n S1: {\n fontSize: 10,\n marginRight: 15,\n color: \"#2C3644\",\n },\n img: {\n height: 20,\n },\n offset: {\n width: \"100%\",\n },\n summary: {\n border: \"2px solid #000921\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#000921\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n steps: {\n width: \"90%\",\n display: \"flex\",\n flexDirection: \"row\",\n marginBottom: 3,\n },\n square: {\n height: 6,\n width: 6,\n backgroundColor: \"#000921\",\n marginLeft: 20,\n marginRight: 10,\n marginTop: 5,\n },\n wrappingTitle: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2E34D0\",\n marginBottom: 15,\n },\n quote: {\n fontSize: 13,\n lineHeight: 1.7,\n textAlign: \"center\",\n alignItems: \"flex-end\",\n },\n author: {\n paddingTop: 10,\n width: \"100%\",\n fontSize: 10,\n lineHeight: 1.2,\n justifyContent: \"flex-start\",\n },\n quoteText: {\n fontWeight: 500,\n },\n quoteSection: {\n paddingTop: 35,\n paddingBottom: 15,\n paddingLeft: 15,\n paddingRight: 15,\n backgroundColor: \"#F0F5FE\",\n display: \"flex\",\n flexDirection: \"column\",\n marginTop: 25,\n marginBottom: 20,\n marginLeft: 5,\n width: \"45%\",\n },\n numbered: { fontWeight: 500, marginRight: 10, fontSize: 9 },\n });\n\n let subSelected = false;\n const navItems = Object.keys(nav);\n const navOptions = [];\n navItems.forEach((item) => {\n let found = false;\n const anchorName = categories.categories.find((f) => f.id === anchor);\n if (nav[item].selected === false) {\n subSelected = true;\n found = true;\n }\n\n if (found) {\n let subNavItems = Object.keys(nav[item]);\n subNavItems = subNavItems.filter(\n (key) => key !== \"priority\" && key !== \"selected\"\n );\n\n let selected = subNavItems.filter((subNav) => nav[item]?.[subNav].sub);\n if (selected.length > 0) {\n selected.forEach((selectedNav) => {\n let subFactorsKeys = Object.keys(nav[item]?.[selectedNav].subfactors);\n subFactorsKeys.forEach((subKey) => {\n if (nav[item]?.[selectedNav].subfactors?.[subKey].selected) {\n navOptions.push(nav[item]?.[selectedNav].subfactors?.[subKey].id);\n }\n });\n });\n }\n }\n });\n\n const rev_order = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];\n\n const check_reverse_score = (resp) => {\n let reverse =\n questions.dimensions[resp.id]?.factors[resp.factor]?.questions[resp.q]\n ?.reverse;\n let response = reverse ? rev_order[resp.response] : resp.response;\n return response;\n };\n\n const average = (array) => {\n let total = 0;\n let n = 0;\n array.map((item) => {\n total += item;\n n += 1;\n });\n return total / n;\n };\n\n const get_pillar_averages = (data, questions) => {\n let _data = [];\n let pillars = [];\n questions.dimensions.map((d) => {\n let d_data = [];\n d.factors.map((f) => {\n let pillarAvg = average(\n data[0].questions\n .filter((x) => x.id == d.id - 1 && x.factor == f.id - 1)\n .map((q) => check_reverse_score(q, questions))\n );\n d_data.push(pillarAvg);\n pillars.push({\n avg: pillarAvg.toFixed(1),\n factor: f.id - 1,\n dimension: d.id - 1,\n });\n });\n _data.push(average(d_data));\n });\n\n return { overall: _data, pillars: pillars };\n };\n\n const generate_table_data = () => {\n const anchors = categories.categories.filter((f) => f.id === anchor);\n return anchors.map((item) => {\n let _data = calculate_table_data(\n data,\n nav,\n categories,\n item.id,\n rule,\n structure\n );\n\n let navLookup = [];\n if (subSelected) {\n _data.responses.forEach((response) => {\n navLookup.push({\n id: response.role,\n label: response?.label?.name,\n });\n });\n }\n return {\n name: item.name,\n id: item.id,\n data: _data.overall,\n lookup: navLookup,\n };\n });\n };\n\n const anchorGroup = categories.categories.find((cat) => cat.id === anchor);\n const pillarAverages =\n previous?.length > 0 && get_pillar_averages(previous, questions);\n\n const introduction = (\n \n \n \n Introduction\n \n \n Even in the healthiest environments, opportunities to provide\n meaningful feedback are often hard to find. Worse yet, people are\n concerned about providing truthful responses for fear of retribution.\n While sport organizations currently measure success in a limited\n fashion, there is a growing appetite to understand the health and\n effectiveness of their culture. We help sport organizations achieve\n this in a safe, secure, and anonymous way.\n \n \n \n \n \n “A nation's culture resides in the hearts and in the soul of its\n people.”\n \n - Mahatma Gandhi \n \n \n \n );\n\n const sportIndex = (\n \n \n The Sport Culture Index\n \n \n The Sport Culture Index is an evidence-based assessment platform that\n quantifies culture in sport environments in the areas of safety,\n well-being, cohesion, empowerment, personalization, belonging, vision,\n values, environment, accountability, adaptability, and communication.\n Developed in 2020 by three sport psychology practitioners (PhD, MSc,\n MSc), an international level sport coach (MEd Leadership) and an Olympic\n level data analyst (MSc), the assessment leverages several validated\n psychometric scales and empirically validated concepts from sport and\n organizational psychology. The information provided by each respondent\n is aggregated to reveal powerful team and organizational trends.\n \n \n );\n\n const methodology = (\n \n \n Assessment Methodology\n \n \n The methodology of the Sport Culture Index (SCI) is grounded in evidence\n suggesting that most meaningful sport culture variables fall into two\n primary categories: people factors (i.e., dynamics, sentiments, and\n relationships) and performance factors (i.e., processes, practices, and\n structures). The SCI allows sport organizations to understand where they\n are indexing on the primary categories of people and performance\n factors, helping them gain an understanding of their overall approach.\n Ultimately, the goal of this report is to provide reliable,\n evidence-based information to guide cultural action steps and\n transformation strategies.\n \n \n );\n\n const wrap = navOptions.length > 5;\n\n const segmentation = (\n \n \n Segmentation By {anchorGroup.name}\n \n \n );\n\n const nextSteps = (\n \n \n How to create change using this report\n \n \n Changing culture is a process, not an event. Therefore, this report\n alone is not a sufficient culture change strategy. The effectiveness of\n this report, like all data, ultimately rests on your willingness to\n reflect, engage, and commit to action. Here are some keys to keep in\n mind as you work to turn the data into transformation.\n \n \n 1. \n \n Establish a sense of urgency. \n Examine the findings of this report with a factual lens.\n Productive change begins when you have the discipline to confront the\n facts of your current reality, whatever they might be.\n \n \n \n 2. \n \n Set your priorities. \n As Brene Brown suggests in her book Dare to Lead, “if you\n have more than three priorities, you have no priorities”. Resist the\n urge to boil the ocean, and rather, hone in on a few key areas you\n have the capacity to impact over the coming months.\n \n \n \n 3. \n \n Form a guiding coalition. \n Assemble a diverse, representative, and influential group\n to lead the change effort. Bring this team together to drive ideation\n in an open and honest way based on the priorities from the report, and\n ensure they are empowered to act on the groups vision.\n \n \n \n 4. \n \n Create short term wins. \n Begin to implement initiatives that are visible and\n obvious based on the feedback provided in the report. These don't have\n to be monumental, but rather little changes that send a signal that\n things are in motion and the feedback provided is making a difference\n right away.\n \n \n \n 5. \n \n Strategize long term success. \n In the midst of celebrating short term culture wins,\n continue to plan bigger initiatives that will be instilled more\n gradually.\n \n \n \n );\n\n return (\n \n \n Report Methods \n \n \n );\n};\n\nFont.register({\n family: \"Poppins\",\n fonts: [{ src: Poppins }],\n format: \"truetype\",\n});\n\nMethodology.propTypes = {\n companyLogo: PropTypes.string,\n introTemplate: PropTypes.number,\n coverImage: PropTypes.string,\n coverHeading: PropTypes.string,\n coverSubtitle: PropTypes.string,\n metadata: PropTypes.object,\n};\n\nexport default Methodology;\n","export default __webpack_public_path__ + \"static/media/Poppins-Bold.cdb29a5d.ttf\";","export default __webpack_public_path__ + \"static/media/Poppins-Medium.673ed423.ttf\";","export default __webpack_public_path__ + \"static/media/Poppins-Regular.35d26b78.ttf\";","export default __webpack_public_path__ + \"static/media/Poppins-LightItalic.4a7d59f8.ttf\";","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Table from \"../components/Table\";\nimport Side from \"../components/Side\";\nimport Footer from \"../components/Footer\";\n\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\nimport PoppinsBold from \"assets/fonts/Poppins-Bold.ttf\";\nimport PoppinsMedium from \"assets/fonts/Poppins-Medium.ttf\";\nimport PoppinsRegular from \"assets/fonts/Poppins-Regular.ttf\";\nimport PoppinsItalic from \"assets/fonts/Poppins-LightItalic.ttf\";\n\nFont.register({\n family: \"Poppins\",\n fonts: [\n { src: Poppins },\n { src: PoppinsItalic, fontWeight: 200 },\n { src: PoppinsBold, fontWeight: 700 },\n { src: PoppinsMedium, fontWeight: 500 },\n { src: PoppinsRegular, fontWeight: 400 },\n ],\n format: \"truetype\",\n});\n\nconst Risks = ({ data, question, categories, anchor, config }) => {\n const tableTemplate = [\n { title: \"Question\", width: \"50%\" },\n { title: \"Factor\", width: \"15%\" },\n { title: \"Anchor\", width: \"15%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Score\", width: \"10%\" },\n ];\n\n const anchorName = categories?.categories.find((f) => f.id === anchor);\n const fetchQuestion = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.q;\n };\n\n const fetchFactor = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)].title;\n };\n\n const fetchRole = (q) => {\n return q?.label?.name;\n };\n\n const fetchReverseOption = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.reverse;\n };\n\n let dataSorted = data.sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (fetchReverseOption(a)) {\n aAverage = 100 - aAverage;\n }\n\n if (fetchReverseOption(b)) {\n bAverage = 100 - bAverage;\n }\n\n return aAverage - bAverage;\n });\n\n const riskDataSorted = dataSorted.slice(0, 10);\n const riskData = riskDataSorted\n .filter((item) => {\n const isReverse = fetchReverseOption(item);\n const average = isReverse\n ? 100 - Math.floor(item.average * 10)\n : Math.floor(item.average * 10);\n return average < config.riskThreshold;\n })\n .map((item) => {\n const average = Math.floor(item.average * 10);\n const isReverse = fetchReverseOption(item);\n const averagePrefix = isReverse ? \"**\" : \"\";\n\n return [\n `${fetchQuestion(item)}`,\n `${fetchFactor(item)}`,\n `${anchorName.name} (${fetchRole(item)})`,\n \"--\",\n `${averagePrefix}${average}%`,\n ];\n });\n\n const riskTableData = {\n rows: tableTemplate,\n data: riskData,\n };\n\n dataSorted = data.sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (fetchReverseOption(a)) {\n aAverage = 100 - aAverage;\n }\n\n if (fetchReverseOption(b)) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const strengthData = dataSorted\n .filter((item) => {\n const isReverse = fetchReverseOption(item);\n const average = isReverse\n ? 100 - Math.floor(item.average * 10)\n : Math.floor(item.average * 10);\n return average > config.strThreshold;\n })\n .slice(0, 10)\n .map((item) => {\n const average = Math.floor(item.average * 10);\n const isReverse = fetchReverseOption(item);\n const averagePrefix = isReverse ? \"**\" : \"\";\n return [\n `${fetchQuestion(item)}`,\n `${fetchFactor(item)}`,\n `${anchorName.name} (${fetchRole(item)})`,\n \"--\",\n `${averagePrefix}${average}%`,\n ];\n });\n\n const strengthTableData = {\n rows: tableTemplate,\n data: strengthData,\n };\n\n return (\n <>\n \n Key Areas of Growth & Strengths \n \n The tables below display the ten lowest (areas of growth) at a\n threshold of 75% and lower, and ten highest (strengths) at a threshold\n of 85% or higher, scoring questions from the assessment, as well as\n the factor each question belongs to.\n \n\n \n \n Top Areas of Growth\n \n {(riskData.length > 0 && (\n No areas of growth detected \n )}\n \n \n \n \n \n Top Strengths\n \n {(strengthData.length > 0 && (\n No Strengths Detected }\n \n \n \n );\n};\n\nexport default Risks;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet } from \"@react-pdf/renderer\";\nimport { calculate_table_data } from \"../../../reports/Audit/data_navigation/calculate_data\";\nimport Segmentation from \"../components/Segmentation\";\nimport Footer from \"../components/Footer\";\nimport Side from \"../components/Side\";\n\nconst Overview = (props) => {\n const {\n nav,\n categories,\n rule,\n structure,\n reportData,\n anchor,\n config,\n previous,\n } = props;\n\n const generate_table_data = () => {\n const anchors = categories.categories.filter(\n (f) => f.priority !== \"primary\" && f.id !== anchor\n );\n\n return anchors.map((item) => {\n let _data = calculate_table_data(\n reportData,\n nav,\n categories,\n item.id,\n rule,\n structure\n );\n\n return {\n name: item.name,\n id: item.id,\n data: _data.overall,\n };\n });\n };\n\n return (\n \n Demographic Analysis \n \n Bacon ipsum dolor amet boudin pig tongue hamburger sausage cupim chuck\n tri-tip tail spare ribs brisket pork loin bresaola. Beef chislic doner\n swine, pork chop porchetta picanha spare ribs. Chicken jerky short ribs,\n pastrami pork fatback ground round spare ribs cow t-bone filet mignon\n hamburger leberkas shank. Meatball burgdoggen pork ribeye.\n */}\n \n \n \n \n );\n};\n\nexport default Overview;\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n padding: 60,\n paddingHorizontal: 80,\n color: \"#2C3644\",\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n },\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2C6CF5\",\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n container: {\n paddingTop: 20,\n },\n});\n","// Libraries\nimport React from \"react\";\nimport {\n Text,\n View,\n StyleSheet,\n Font,\n Svg,\n Defs,\n LinearGradient,\n Stop,\n Page,\n Polygon,\n} from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\n// import GradientNumbers from \"../components/GradientNumbers\";\n\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\nimport PoppinsBold from \"assets/fonts/Poppins-Bold.ttf\";\nimport PoppinsMedium from \"assets/fonts/Poppins-Medium.ttf\";\nimport PoppinsRegular from \"assets/fonts/Poppins-Regular.ttf\";\nimport PoppinsItalic from \"assets/fonts/Poppins-LightItalic.ttf\";\n\nFont.register({\n family: \"Poppins\",\n fonts: [\n { src: Poppins },\n { src: PoppinsItalic, fontWeight: 200 },\n { src: PoppinsBold, fontWeight: 700 },\n { src: PoppinsMedium, fontWeight: 500 },\n { src: PoppinsRegular, fontWeight: 400 },\n ],\n format: \"truetype\",\n});\n\n/**\n * Generates the table of contents for the PDF\n *\n * @returns a Table Of Contents Page\n */\nconst TableOfContents = (props) => {\n const {\n config,\n numberOfValidCategories,\n introTemplate,\n anchor,\n categories,\n overviewTitles,\n } = props;\n const anchorObject = categories?.categories.find((f) => f.id === anchor);\n\n // Page adjustments\n const pageAdjustments = {};\n if (introTemplate === 2) {\n pageAdjustments.factorsAdjustment = numberOfValidCategories > 1 ? 1 : 0;\n\n pageAdjustments.cultureMapAdjustment =\n anchorObject.priority !== \"primary\"\n ? pageAdjustments.factorsAdjustment - 1\n : pageAdjustments.factorsAdjustment;\n } else {\n pageAdjustments.factorsAdjustment = 0;\n\n pageAdjustments.cultureMapAdjustment =\n anchorObject.priority !== \"primary\" ? 0 : 1;\n }\n\n const getCurrentPage = (currentPage, isTitle) => {\n if (anchorObject.priority === \"primary\" && isTitle) {\n return currentPage - 1;\n }\n return introTemplate === 2 && numberOfValidCategories === 1\n ? currentPage + 1\n : currentPage;\n };\n\n // Denotes breakdown start page.\n let currentPage = (introTemplate === 1 && 11) || 10;\n\n return (\n \n \n \n \n \n\n \n Table of Contents \n \n Report Methods \n 3 \n \n \n Introduction \n 3 \n \n \n Methodology \n 3 \n \n \n Results & Key Findings \n {5 + pageAdjustments.factorsAdjustment} \n \n\n \n {`${overviewTitles[0]}` || `Human Factor`} Overview \n {5 + pageAdjustments.factorsAdjustment} \n \n \n {`${overviewTitles[1]}` || `System Factor`} Overview \n {6 + pageAdjustments.factorsAdjustment} \n \n \n Demographic Analysis \n {7 + pageAdjustments.factorsAdjustment} \n \n {introTemplate === 1 && (\n <>\n \n Key Areas of Growth \n {8 + pageAdjustments.factorsAdjustment} \n \n\n \n Key Strengths \n {9 + pageAdjustments.factorsAdjustment} \n \n \n )}\n \n Culture Index Map \n \n {(introTemplate === 1 &&\n 10 + pageAdjustments.cultureMapAdjustment) ||\n 9 + pageAdjustments.cultureMapAdjustment}\n \n \n \n {`${overviewTitles[0]}` || `Human Factor`} Analysis \n \n {(introTemplate === 1 &&\n currentPage + pageAdjustments.cultureMapAdjustment) ||\n currentPage + pageAdjustments.cultureMapAdjustment}\n \n \n {/* \n Introduction \n 11 \n */}\n {props.subSections[0].map((section, i) => {\n let pageAdjustment = pageAdjustments.cultureMapAdjustment;\n if (introTemplate === 2 && numberOfValidCategories === 1 && i === 0) {\n currentPage += pageAdjustment;\n }\n\n if (anchorObject.priority === \"primary\" && i === 0) {\n currentPage += 1;\n }\n\n const row = (\n \n {section.title} \n {currentPage} \n \n );\n\n currentPage = currentPage + section.pages;\n\n return row;\n })}\n \n {`${overviewTitles[1]}` || `System Factor`} Analysis \n \n {getCurrentPage(currentPage, true) +\n pageAdjustments.cultureMapAdjustment}\n \n \n {props.subSections[1].map((section, i) => {\n let pageAdjustment = pageAdjustments.cultureMapAdjustment;\n if (introTemplate === 2 && numberOfValidCategories === 1 && i === 0) {\n currentPage += pageAdjustment;\n }\n const row = (\n \n {section.title} \n {getCurrentPage(currentPage)} \n \n );\n\n currentPage = currentPage + section.pages;\n\n return row;\n })}\n {/* {props.showFeedbackSection && (\n \n Feedback \n {currentPage + 1} \n \n )} */}\n \n \n {config.aboutCompany}\n \n\n {config.aboutDescription} \n \n \n \n );\n};\n\n// Create styles\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n display: \"flex\",\n flexDirection: \"row\",\n },\n shapes: {\n height: \"100vh\",\n position: \"relative\",\n },\n textarea: {\n paddingHorizontal: 15,\n paddingTop: 80,\n width: 350,\n fontSize: 12,\n height: \"100%\",\n },\n title: {\n fontSize: 26,\n fontWeight: 700,\n marginBottom: 20,\n color: \"#000921\",\n },\n row: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\",\n },\n bold: {\n fontWeight: 700,\n marginBottom: 2,\n marginTop: 5,\n },\n indent: {\n paddingLeft: 20,\n marginBottom: 2,\n },\n about: {\n fontSize: 10,\n color: \"grey\",\n },\n});\n\nTableOfContents.propTypes = {\n subSections: PropTypes.array,\n};\n\nexport default TableOfContents;\n","// Libraries\nimport React from \"react\";\nimport { View, StyleSheet, Text, Page, Font } from \"@react-pdf/renderer\";\n\nimport Side from \"../components/Side\";\nimport Footer from \"../components/Footer\";\nimport Table from \"../components/Table\";\n\n// Components\nimport { getFeedback } from \"../utils/cultureUtils\";\n\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\nimport PoppinsBold from \"assets/fonts/Poppins-Bold.ttf\";\nimport PoppinsMedium from \"assets/fonts/Poppins-Medium.ttf\";\nimport PoppinsRegular from \"assets/fonts/Poppins-Regular.ttf\";\nimport PoppinsItalic from \"assets/fonts/Poppins-LightItalic.ttf\";\n\nFont.register({\n family: \"Poppins\",\n fonts: [\n { src: Poppins },\n { src: PoppinsItalic, fontWeight: 200 },\n { src: PoppinsBold, fontWeight: 700 },\n { src: PoppinsMedium, fontWeight: 500 },\n { src: PoppinsRegular, fontWeight: 400 },\n ],\n format: \"truetype\",\n});\n\nconst FeedbackSection = (props) => {\n const getSentiment = (sent) => {\n if (sent > 2) {\n return \"Positive\";\n }\n if (sent < -2) {\n return \"Negative\";\n }\n return \"Neutral\";\n };\n\n const getRisk = (risk) => {\n if (risk > 70) {\n return `High`;\n }\n if (risk > 20) {\n return `Moderate`;\n }\n return `Low`;\n };\n\n const options = props.structure.comments\n .filter((item, i) => item.response.length > 0)\n .map((item, i) => {\n return {\n text: item.question,\n value: i,\n };\n });\n\n const tableTemplate = [\n { title: \"Feedback\", width: \"57%\" },\n { title: \"Sport\", width: \"20%\" },\n { title: \"Risk\", width: \"10%\" },\n { title: \"Sentiment\", width: \"13%\" },\n ];\n\n const optionsTest = new Array(5).fill({\n text: \"How much wood would a woodchuck?\",\n });\n\n const feedbackTables = options.map((option, i) => {\n const feedbackData = getFeedback(\n option.value,\n props.categories,\n props.filterData,\n props.structure\n );\n\n if (!feedbackData || feedbackData.length === 0) {\n return null;\n }\n\n // const testFeedback = new Array(50).fill({\n // text: \"Test analysis Test analysisTest analysisTest analysisTest analysisTest analysisTest analysisTest analysisTest analysis\",\n // primary: \"Athlete\",\n // risk: 70,\n // sentiment: 3,\n // });\n\n // const tableData = testFeedback.map((feedback) => {\n // return [\n // `${feedback.text}`,\n // `${feedback.primary}`,\n // `${getRisk(feedback.risk)}`,\n // `${getSentiment(feedback.sentiment)}`,\n // ];\n // });\n\n const tableData = feedbackData\n .filter((f) => f.text != \"\")\n .map((feedback) => {\n return [\n `${feedback.text}`,\n `${feedback.primary}`,\n `${getRisk(feedback.risk)}`,\n `${getSentiment(feedback.sentiment)}`,\n ];\n });\n\n const tableContent = {\n rows: tableTemplate,\n data: tableData,\n };\n\n return (\n \n \n {i + 1}. Question \n {option.text} \n \n \n \n \n );\n });\n\n return (\n \n Feedback \n \n );\n};\n\nconst styles = StyleSheet.create({\n page: {\n flexDirection: \"column\",\n backgroundColor: \"white\",\n paddingTop: 30,\n paddingHorizontal: 50,\n marginBottom: 30,\n paddingBottom: 80,\n fontFamily: \"Poppins\",\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n marginBottom: 20,\n },\n pageWrapper: {\n flexDirection: \"column\",\n backgroundColor: \"white\",\n fontFamily: \"Poppins\",\n },\n scale: {\n height: \"5px\",\n borderRadius: \"12px\",\n },\n scaleBar: {\n width: \"80px\",\n backgroundColor: \"rgb(232,232,232)\",\n height: \"5px\",\n borderRadius: \"12px\",\n },\n feedbackWrapper: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"column\",\n },\n feedbackRow: {\n display: \"flex\",\n flexDirection: \"row\",\n width: \"100%\",\n padding: \"10px\",\n borderBottom: \"1px\",\n },\n headerRow: {\n display: \"flex\",\n flexDirection: \"row\",\n width: \"100%\",\n },\n feedbackCol: {\n width: \"40%\",\n },\n commonCol: {\n width: \"20%\",\n },\n riskCol: {\n width: \"30%\",\n justifyContent: \"center\",\n left: \"10px\",\n },\n labelColWrapper: {\n justifyContent: \"center\",\n width: \"20%\",\n },\n labelCol: {\n textAlign: \"center\",\n justifyContent: \"center\",\n padding: \"2px\",\n borderRadius: \"5px\",\n backgroundColor: \"rgb(232,232,232)\",\n minHeight: 27,\n maxHeight: 27,\n },\n labelHeaderCol: {\n textAlign: \"center\",\n width: \"20%\",\n justifyContent: \"center\",\n },\n headerLabel: {\n fontFamily: \"Poppins\",\n fontSize: \"12px\",\n fontWeight: \"semibold\",\n color: \"#2C3644\",\n },\n regText: {\n fontSize: \"11px\",\n color: \"#2C3644\",\n },\n labelText: {\n fontSize: \"10px\",\n fontFamily: \"Poppins\",\n fontWeight: 400,\n color: \"#2C3644\",\n },\n questionWrapper: {\n paddingBottom: \"10px\",\n paddingTop: \"25px\",\n },\n primaryCol: {\n width: \"25%\",\n textAlign: \"center\",\n justifyContent: \"center\",\n },\n t2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n color: \"#2C3644\",\n },\n sub: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2E34D0\",\n },\n section: {\n paddingTop: 20,\n paddingBottom: 20,\n paddingLeft: 30,\n paddingRight: 30,\n backgroundColor: \"#F0F5FE\",\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 13,\n marginBottom: 5,\n color: \"#2C3644\",\n },\n question: {\n fontSize: 11,\n lineHeight: 1.7,\n color: \"#2C3644\",\n },\n});\n\nexport default FeedbackSection;\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TH: {\n fontSize: 10,\n textTransform: \"uppercase\",\n color: \"white\",\n fontWeight: 500,\n padding: 3,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n H1: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n marginBottom: 30,\n },\n});\n\nconst Table = ({\n data,\n headerColor,\n wrapRow = true,\n hideReverseText = true,\n}) => {\n return (\n \n \n \n {data.rows.map((item) => (\n \n {item.title} \n \n ))}\n \n \n {data.data.map((item, x) => {\n return (\n \n {item.map((row, i) => (\n \n {row} \n \n ))}\n \n );\n })}\n \n \n \n );\n};\n\nexport default Table;\n","import React from \"react\";\nimport { View, Text, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport Table from \"../components/Table\";\nimport OutcomesTable from \"../components/OutcomesTable\";\nimport Footer from \"../components/Footer\";\nimport Side from \"../components/Side\";\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n color: \"#2C3644\",\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n color: \"#2C3644\",\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n color: \"#2C3644\",\n },\n summary: {\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n color: \"#2C3644\",\n },\n top: {\n backgroundColor: \"#2C3644\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n outcomesSummary: {\n padding: 10,\n marginTop: 10,\n },\n});\n\nconst numberToWords = (number) => {\n const numberString = number.toString();\n const numberArray = numberString.split(\"\");\n const words = [];\n const numberWords = [\n \"zero\",\n \"one\",\n \"two\",\n \"three\",\n \"four\",\n \"five\",\n \"six\",\n \"seven\",\n \"eight\",\n \"nine\",\n ];\n numberArray.forEach((digit) => {\n words.push(numberWords?.[digit]);\n });\n\n if (words?.length > 0) {\n return words.join(\" \");\n } else {\n return number;\n }\n};\n\nconst Overview = (props) => {\n const {\n humanFactorData,\n systemFactorData,\n calculated,\n overviewTitles,\n config,\n previousData,\n questions,\n isSportLaw,\n outcomesData,\n outcomesQuestions,\n } = props;\n\n // const outcomesTable = outcomesQuestions ?\n\n const getOutcomesTable = (outcomesData, questions) => {\n const outcomesTable = {\n rows: [\n { title: \"Critical Outcome\", width: \"68%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"12%\" },\n ],\n };\n\n let data = [];\n questions?.forEach((ques, idx) => {\n let row = [];\n row.push(ques.name);\n let score =\n Number(\n outcomesData[idx][outcomesData[idx]?.length - 1]?.overallAverage\n ) * 10;\n if (!isNaN(score)) {\n row.push(`${score}%`);\n row.push(\"--\");\n row.push(\"--\");\n data.push(row);\n }\n });\n\n outcomesTable.data = data;\n return outcomesTable;\n };\n\n const TableTemplate = !isSportLaw\n ? {\n rows: [\n { title: \"Factor\", width: \"68%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"12%\" },\n ],\n data: [\n [\"Safety\", \"96%\", \"A+\", \"--\", \"--\"],\n [\"Well-being\", \"96%\", \"A+\", \"--\", \"--\"],\n [\"Cohesion\", \"96%\", \"A+\", \"--\", \"--\"],\n [\"Empowerment\", \"96%\", \"A+\", \"--\", \"--\"],\n [\"Personalization\", \"96%\", \"A+\", \"--\", \"--\"],\n [\"Belonging\", \"96%\", \"A+\", \"--\", \"--\"],\n ],\n }\n : {\n rows: [\n { title: \"Factor\", width: \"70%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"10%\" },\n ],\n data: [\n [\"Safety\", \"96%\", \"--\", \"--\"],\n [\"Well-being\", \"96%\", \"--\", \"--\"],\n [\"Cohesion\", \"96%\", \"--\", \"--\"],\n [\"Empowerment\", \"96%\", \"--\", \"--\"],\n [\"Personalization\", \"96%\", \"--\", \"--\"],\n [\"Belonging\", \"96%\", \"--\", \"--\"],\n ],\n };\n\n let overallChangePeople = 0;\n let overallChangePerformance = 0;\n\n const rev_order = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];\n\n const check_reverse_score = (resp) => {\n let reverse =\n questions.dimensions[resp.id]?.factors[resp.factor]?.questions[resp.q]\n ?.reverse;\n let response = reverse ? rev_order[resp.response] : resp.response;\n return response;\n };\n\n const checkReverseAverage = (resp) => {\n let reverse =\n questions.dimensions[resp.dimension]?.factors[Number(resp.section)]\n ?.questions[Number(resp.question)]?.reverse;\n let response = reverse ? 10 - resp.average : resp.average;\n return response;\n };\n\n const average = (array) => {\n let total = 0;\n let n = 0;\n array.map((item) => {\n total += item;\n n += 1;\n });\n return total / n;\n };\n\n const get_last_overall_average = (prevData, dimension) => {\n //Filter questions based on the selected pillar first\n let questionsSum = prevData\n .map((item) => item.questions.filter((f) => f.id === dimension))\n .flat()\n .map((item) => check_reverse_score(item));\n return average(questionsSum);\n };\n\n const get_pillar_averages = (data, questions) => {\n let _data = [];\n let pillars = [];\n questions.dimensions.map((d) => {\n let d_data = [];\n d.factors.map((f) => {\n const dataArray = data\n .map((item) => {\n return item.questions\n .filter((x) => x.id == d.id - 1 && x.factor == f.id - 1)\n .map((q) => check_reverse_score(q, questions));\n })\n .flat();\n let pillarAvg = average(dataArray);\n d_data.push(pillarAvg);\n pillars.push({\n avg: pillarAvg.toFixed(1),\n factor: f.id - 1,\n dimension: d.id - 1,\n });\n });\n\n _data.push(average(d_data));\n });\n\n return { overall: _data, pillars: pillars };\n };\n\n const get_last_factor_average = (prevData, dimension, factor) => {\n //Filter questions based on the selected pillar first\n let questionsSum = prevData\n .map((item) =>\n item.questions.filter((f) => f.id === dimension && f.factor === factor)\n )\n .flat()\n .map((item) => check_reverse_score(item));\n return average(questionsSum) * 10;\n };\n\n const getAverage = (data) => {\n let total = 0;\n let n = 0;\n data.map((i) => {\n total += i.average * i.n;\n n += i.n;\n });\n\n return ((total / n) * 10) / 10;\n };\n\n // find the average using the factor and dimension\n const findFactorAvg = (avgs, factor, dimension) => {\n const avg = avgs?.pillars?.find(\n (p) => p.factor === factor && p.dimension === dimension\n );\n return avg?.avg;\n };\n const pillarAverages =\n previousData?.length > 0 && get_pillar_averages(previousData, questions);\n\n const getFactorsDetails = (calculated, dimension, factorsData) => {\n let newDetails = factorsData?.map((item) => {\n const dimData = calculated?.responses?.filter(\n (item) => item.dimension === Number(dimension)\n );\n let factorData = dimData?.filter(\n (dimItem) => Number(dimItem.section) === item.id\n );\n\n const averageValue =\n factorData?.reduce((a, b) => {\n return a + checkReverseAverage(b) * b?.n;\n }, 0) / factorData?.reduce((a, b) => a + b?.n, 0);\n\n return {\n ...item,\n average: averageValue.toFixed(1) * 10,\n averageForPrevious: averageValue * 10,\n };\n });\n\n // remove any NaN or undefined values\n newDetails = newDetails?.filter((item) => item.average);\n\n let formattedData = factorsData?.map((factor) => {\n const currentFactor = newDetails?.find((item) => item.id === factor.id);\n let previousAvg;\n let change;\n if (previousData?.length > 0) {\n previousAvg = isSportLaw\n ? previousData?.length > 0 &&\n get_last_factor_average(previousData, dimension, factor.id)\n : pillarAverages &&\n findFactorAvg(pillarAverages, factor.id, dimension);\n\n if (previousAvg) {\n change = isSportLaw\n ? (\n previousAvg && currentFactor?.averageForPrevious - previousAvg\n ).toFixed(0)\n : previousAvg && currentFactor?.average - Number(previousAvg * 10);\n }\n }\n if (currentFactor?.average) {\n if (!isSportLaw) {\n return [\n factor.factor,\n `${currentFactor?.average}%`,\n \"--\",\n change ? `${change}%` : \"--\",\n ];\n } else {\n return [\n factor.factor,\n `${currentFactor?.average}%`,\n \"--\",\n change && Number(change) !== 0 ? `${change}%` : \"--\",\n ];\n }\n }\n });\n\n formattedData = formattedData?.filter((item) => item);\n return formattedData;\n };\n\n const humanDataFormatted = getFactorsDetails(calculated, 0, humanFactorData);\n const systemDataFormatted = getFactorsDetails(\n calculated,\n 1,\n systemFactorData\n );\n\n let overallHumanAvg = humanDataFormatted.reduce(\n (a, b) => a + Number(b[1].replace(\"%\", \"\")),\n 0\n );\n\n let overallFactorAvg = systemDataFormatted.reduce(\n (a, b) => a + Number(b[1].replace(\"%\", \"\")),\n 0\n );\n\n let sLawPeopleChange;\n let sLawSystemChange;\n if (isSportLaw) {\n const prevPeopleAvg = get_last_overall_average(previousData, 0) * 10;\n sLawPeopleChange =\n overallHumanAvg / humanDataFormatted.length - prevPeopleAvg;\n const prevSystemAvg = get_last_overall_average(previousData, 1) * 10;\n sLawSystemChange =\n overallFactorAvg / systemDataFormatted.length - prevSystemAvg;\n }\n\n overallHumanAvg = Math.round(overallHumanAvg / humanDataFormatted.length);\n\n const peopleChange = isSportLaw\n ? sLawPeopleChange\n : pillarAverages && overallHumanAvg - pillarAverages?.overall[0] * 10;\n\n overallChangePeople = isSportLaw\n ? (peopleChange &&\n Math.abs(Number(peopleChange)).toFixed(0) !== \"0\" &&\n ` (${peopleChange.toFixed(0)}%)`) ||\n \"\"\n : previousData && previousData?.length > 0 && !isNaN(peopleChange)\n ? ` (${peopleChange.toFixed(1)}%)`\n : \"\";\n\n overallFactorAvg = Math.round(overallFactorAvg / systemDataFormatted.length);\n const systemChange = isSportLaw\n ? sLawSystemChange\n : pillarAverages && overallFactorAvg - pillarAverages?.overall[1] * 10;\n\n overallChangePerformance = isSportLaw\n ? (systemChange &&\n Math.abs(Number(systemChange)).toFixed(0) !== \"0\" &&\n ` (${systemChange.toFixed(0)}%)`) ||\n \"\"\n : previousData && previousData?.length > 0 && !isNaN(systemChange)\n ? ` (${systemChange.toFixed(1)}%)`\n : \"\";\n\n const humanFactorTemplate = {\n rows: TableTemplate.rows,\n data: humanDataFormatted,\n };\n\n const systemFactorTemplate = {\n rows: TableTemplate.rows,\n data: systemDataFormatted,\n };\n\n return (\n \n Factors Overview \n \n The tables below contain summary metrics on the people and performance\n factors within the Culture Index.\n \n\n \n \n {overviewTitles[0]} Dimension Overview\n \n \n The table below contains summary metrics on all \n \n {overviewTitles[0].toLowerCase()}\n \n factors within the Culture Index.\n \n\n \n \n \n {overviewTitles[0]} Dimension Score: {Math.round(overallHumanAvg)}\n % \n {previousData && overallChangePeople}\n \n \n \n \n Factor Summary\n \n \n \n \n \n \n {overviewTitles[1]} Dimension Overview\n \n \n The table below contains summary metrics on all \n \n {overviewTitles[1].toLowerCase()}\n \n factors within the Culture Index.\n \n\n \n \n \n {overviewTitles[1]} Dimension Score:{\" \"}\n {Math.round(overallFactorAvg)}% \n {previousData && overallChangePerformance}\n \n \n \n \n Factor Summary\n \n \n \n\n {outcomesData && outcomesQuestions && (\n <>\n \n Outcomes Overview\n \n \n The table below contains summary metrics on all \n critical outcomes \n within the Culture Index, which are typically impacted by\n culture.\n \n \n \n Outcomes Summary\n \n \n \n )}\n \n \n );\n};;\n\nexport default Overview;\n","import React from \"react\";\nimport { View, Text, StyleSheet, Page, Image } from \"@react-pdf/renderer\";\nimport Footer from \"../components/Footer\";\nimport Side from \"../components/Side\";\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n color: \"#2C3644\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 10,\n color: \"#2C3644\",\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n p: {\n fontSize: 10,\n marginBottom: 10,\n lineHeight: 1.7,\n color: \"#2C3644\",\n },\n chartWrapper: {\n paddingTop: 20,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n summary: {\n border: \"2px solid #2C3644\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#2C3644\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n});\n\nconst CultureMap = (props) => {\n const { chart, config, isSportLaw } = props;\n\n return (\n \n \n Culture Index Map \n \n The Culture Index Map below provides a snapshot of where each segment\n within the report indexed on the people and performance dimensions\n overall. Each axis represents an average of all factors within each\n dimension. Lastly, the data is visualized by segment, reflected in the\n legend at the bottom of map.\n \n \n\n \n \n \n );\n};\n\nexport default CultureMap;\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n marginBottom: 30,\n position: \"relative\",\n marginTop: 20,\n },\n bottom: {\n width: \"85%\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n row: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n },\n title: {\n width: \"22%\",\n display: \"flex\",\n alignItems: \"flex-end\",\n textAlign: \"right\",\n paddingRight: 5,\n fontSize: 10,\n borderRight: \"1px solid #2C3644\",\n paddingTop: 2,\n paddingBottom: 2,\n color: \"#2C3644\",\n },\n bar: {\n height: 8,\n opacity: 0.9,\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n paddingTop: 2,\n paddingBottom: 2,\n },\n score: {\n fontSize: 10,\n fontWeight: 700,\n marginLeft: 8,\n position: \"absolute\",\n right: -25,\n top: -2,\n opacity: 1,\n color: \"#2C3644\",\n },\n lines: {\n position: \"absolute\",\n left: \"20%\",\n height: \"100%\",\n width: \"calc(80% + 20px)\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n line: {\n height: \"calc(100% + 10px)\",\n width: 1,\n borderLeft: \"0.5px dashed black\",\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n chart: {\n position: \"relative\",\n },\n text: {\n position: \"absolute\",\n top: -35,\n left: -25,\n fontSize: 7,\n color: \"grey\",\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"column\",\n width: 50,\n textAlign: \"center\",\n },\n norm: {\n position: \"absolute\",\n height: \"100%\",\n width: \"100%\",\n left: \"20%\",\n },\n});\n\n/**\n * Returns the average, and reverse scoring as per new specs\n * @param {number} avg current average\n * @param {*} item object containing data regarding question type\n */\nconst getTableAvg = (avg, item) => {\n // if (item && item.reverse) {\n // return 100 - avg;\n // }\n\n return avg;\n};\n\nconst Chart = (props) => {\n const {\n options,\n data,\n question,\n barColor,\n subSelected,\n previous,\n anchor,\n questionId,\n dimension,\n factor,\n } = props;\n\n const average = (array) => {\n let total = 0;\n let n = 0;\n array.map((item) => {\n total += item != null ? item : 0;\n n += item != null ? 1 : 0;\n });\n\n if (!total) {\n return 0;\n }\n\n return total / n;\n };\n\n const get_last_question_total = (data, qId, dimension, factor) => {\n if (data.length === 0) {\n return 0;\n }\n\n return average(\n data?.map((item) => {\n const q = item.questions.find((f) => {\n return f.q === qId && f.id === dimension && f.factor === factor - 1;\n })?.response;\n\n return q;\n })\n );\n };\n\n const get_cat_average = (cat, data, qId, dimension, factor) => {\n return get_last_question_total(\n data.filter((f) => {\n return f.categories.find((f) => f.id === anchor)?.response === cat;\n }),\n qId,\n dimension,\n factor\n );\n };\n\n const optionsSorted = options\n .map((option) => {\n let responseGroup = !subSelected\n ? data.find((group) => group.role === option.id)\n : data.find((group) => group.role === option);\n\n return {\n average:\n (responseGroup &&\n getTableAvg(Math.round(responseGroup?.average * 10), question)) ||\n 0,\n name: !subSelected ? option?.name : responseGroup?.label?.name,\n showZero: responseGroup?.distribution?.length > 0,\n id: !subSelected ? option.id : option,\n };\n })\n .sort((a, b) => a.average - b.average)\n .reverse();\n\n let avg = 0;\n\n optionsSorted.forEach((option) => {\n avg = avg + option.average;\n });\n\n avg = avg / optionsSorted.length;\n return (\n \n \n {optionsSorted.map((item) => {\n if (!item.showZero) {\n return null;\n }\n\n const catAvg = previous\n ? get_cat_average(\n item.id,\n previous,\n questionId,\n dimension,\n factor\n ) * 10\n : 0;\n\n return (\n \n {item.name} \n \n \n {Math.floor(item.average) + \"%\"}\n \n \n {catAvg > 0 && (\n \n \n \n )}\n \n );\n })}\n \n \n );\n};\n\nexport default Chart;\n","import React, { useEffect, useState } from \"react\";\nimport { View, Text, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport Table from \"../components/Table\";\nimport Chart from \"../components/Chart\";\nimport Footer from \"../components/Footer\";\nimport Side from \"../components/Side\";\nimport { getGrade } from \"../utils/cultureUtils\";\n\nconst themesArray = [\n {\n pointTitleOne: \"Open communication\",\n pointDescriptionOne:\n \"Many participants mentioned feeling comfortable speaking up and addressing concerns with their coaches and teammates. They appreciate the open-mindedness and willingness to listen and evaluate their concerns in an effort to improve as a team.\",\n pointTitleTwo: \"Unequal value of opinions\",\n pointDescriptionTwo:\n \"Several participants expressed frustration that their ideas, suggestions, and opinions were not taken as seriously or valued as much as others. They felt ignored or even discouraged from speaking up, which impacted their overall satisfaction with the team environment.\",\n pointTitleThree: \"Fear of repercussions\",\n pointDescriptionThree:\n \"Some participants expressed a fear of speaking up or disagreeing with the coaching staff due to concerns about potential negative consequences in terms of playing time or perceived punishments. This fear may discourage open dialogue and limit the expression of different perspectives within the team.\",\n },\n {\n pointTitleOne: \"Lack of emotional discussions\",\n pointDescriptionOne:\n \"Participants mention that emotions are not commonly discussed or addressed in the hockey culture. There is a need for more open conversations about feelings and emotions, even when facing challenges or losses.\",\n pointTitleTwo: \"Support and camaraderie\",\n pointDescriptionTwo:\n \"The feedback highlights the positive aspect of having a supportive team environment where everyone is there for each other. It is seen as important to offer help and support to teammates during hardships.\",\n pointTitleThree: \"Difficulty in seeking help\",\n pointDescriptionThree:\n \"While there are resources available, participants express that it can be challenging to seek help and support due to the perception of being mentally strong. There is a need for more awareness and encouragement to utilize the available resources when going through tough times.\",\n },\n {\n pointTitleOne: \"Balancing Individuality and Team Dynamics\",\n pointDescriptionOne:\n \"Some respondents emphasized the importance of being authentic and true to oneself, but also acknowledged the need to adapt and prioritize the team's success over personal preferences or behaviors.\",\n pointTitleTwo: \"Open-mindedness and Growth\",\n pointDescriptionTwo:\n \"Several comments mentioned the importance of being open to new ideas, trying new things, and having a growth mindset. Respondents felt that having an open mind contributes to personal and team development.\",\n pointTitleThree: \"Equality and Inclusion\",\n pointDescriptionThree:\n \"A number of respondents expressed the importance of treating everyone equally, regardless of their background, nationality, language, or appearance. They emphasized the value of inclusivity and treating all team members with respect and fairness.\",\n },\n];\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n color: \"#2C3644\",\n },\n p: {\n fontSize: 11,\n lineHeight: 1.7,\n marginBottom: 10,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n },\n section: {\n paddingTop: 20,\n paddingBottom: 20,\n paddingLeft: 30,\n paddingRight: 30,\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 13,\n marginBottom: 5,\n },\n question: {\n fontSize: 9.5,\n lineHeight: 1.7,\n },\n S1: {\n fontSize: 10,\n marginRight: 15,\n },\n img: {\n height: 20,\n },\n offset: {\n width: \"100%\",\n },\n summary: {\n border: \"2px solid #2C6BAA\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#2C6BAA\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n },\n legendText: {\n fontSize: 9,\n lineHeight: 1.7,\n marginTop: -6,\n marginLeft: 13,\n },\n legendWrapper: {\n flexDirection: \"row\",\n display: \"flex\",\n },\n legend: {\n width: 10,\n lineHeight: 1.9,\n borderBottomColor: \"black\",\n borderBottomWidth: 1,\n borderBottomStyle: \"dotted\",\n },\n themeSection: {\n // marginTop: 20,\n // marginBottom: 20,\n },\n themeTitle: {\n fontSize: 10,\n fontWeight: 700,\n color: \"#2C3644\",\n // marginBottom: 10,\n },\n themeWrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: 8,\n // lineHeight: 1.7,\n },\n themeText: {\n marginBottom: 5,\n },\n boldedTheme: {\n fontWeight: 700,\n },\n});\n\nconst get_question_list = (q, dimension, questions) => {\n return questions.dimensions[dimension].factors.find((f) => {\n return f.id === q.id;\n }).questions;\n};\n\n/**\n * Returns the average, and reverse scoring as per new specs\n * @param {*} data\n * @param {*} item\n * @returns\n */\nconst get_average = (data, item) => {\n let n = 0;\n let sum = [];\n\n data.map((i) => {\n sum.push(i.average * i.n);\n n += i.n;\n });\n\n const score = Math.round((sum.reduce((pv, cv) => pv + cv, 0) / n) * 10);\n\n if (item && item.reverse) {\n return 100 - score;\n }\n\n return score;\n};\n\nconst getAverageForChange = (data, item) => {\n let n = 0;\n let sum = [];\n\n data.map((i) => {\n sum.push(i.average * i.n);\n n += i.n;\n });\n\n const score = (sum.reduce((pv, cv) => pv + cv, 0) / n) * 10;\n\n if (item && item.reverse) {\n return 100 - score;\n }\n\n return score;\n};\n\nconst structured = (data, q, dimension) => {\n return data.filter((f) => {\n return f.dimension === dimension && Number(f.section) === q.id - 1;\n });\n};\n\nconst Breakdown = (props) => {\n const {\n question,\n info,\n refresh,\n questions,\n categories,\n anchor,\n dimension,\n config,\n navBar,\n filterData,\n previous,\n isSportLaw,\n index,\n } = props;\n\n const [q, setQ] = useState(get_question_list(question, dimension, questions));\n const [data, setData] = useState(structured(info, question, dimension));\n const anchorName = categories.find((f) => f.id === anchor);\n let subSelected = false;\n const navItems = Object.keys(navBar);\n const navOptions = [];\n let hasPrevious = false;\n navItems.forEach((item) => {\n let found = false;\n if (navBar[item].selected === false && anchorName.name === \"Sport\") {\n subSelected = true;\n found = true;\n }\n\n if (found) {\n let subNavItems = Object.keys(navBar[item]);\n subNavItems = subNavItems.filter(\n (key) => key !== \"priority\" && key !== \"selected\"\n );\n let selected = subNavItems.filter((subNav) => navBar[item]?.[subNav].sub);\n if (selected.length > 0) {\n selected.forEach((selectedNav) => {\n let subFactorsKeys = Object.keys(\n navBar[item]?.[selectedNav].subfactors\n );\n subFactorsKeys.forEach((subKey) => {\n if (navBar[item]?.[selectedNav].subfactors?.[subKey].selected) {\n navOptions.push(\n navBar[item]?.[selectedNav].subfactors?.[subKey].id\n );\n }\n });\n });\n }\n }\n });\n\n const tableTemplate = !isSportLaw\n ? [\n { title: \"Question\", width: \"68%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"12%\" },\n ]\n : [\n { title: \"Question\", width: \"70%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"10%\" },\n ];\n\n const average = (array) => {\n let total = 0;\n let n = 0;\n array.map((item) => {\n total += item != null ? item : 0;\n n += item != null ? 1 : 0;\n });\n\n if (!total) {\n return 0;\n }\n\n return total / n;\n };\n\n const get_last_question_total = (qId, dimension, factor) => {\n if (previous.length === 0) {\n return null;\n }\n\n const prevArray = previous?.map((item) => {\n const q = item.questions.find((f) => {\n return f.q === qId && f.id === dimension && f.factor === factor - 1;\n })?.response;\n\n return q;\n });\n\n return average(prevArray);\n };\n\n useEffect(() => {\n setData(structured(info, question, dimension));\n setQ(get_question_list(question, dimension, questions));\n }, [info, refresh]);\n\n const getFactor = () => {\n return questions.dimensions[dimension].factors.find(\n (f) => f.id === question.id\n ).title;\n };\n\n const getFactorObj = () => {\n return questions.dimensions[dimension].factors.find(\n (f) => f.id === question.id\n );\n };\n\n if (data.length === 0) {\n return null;\n }\n\n const overviewTableData = q.map((item, i) => {\n const questionData = data.filter((f) => Number(f.question) === i);\n const averageNormal = get_average(questionData, null, true);\n const averageForChange = getAverageForChange(questionData, null, true) / 10;\n const getPrefix = item.reverse ? \"**\" : \"\";\n let prevTotal = get_last_question_total(i, dimension, getFactorObj().id);\n\n prevTotal = prevTotal !== null ? prevTotal : null;\n\n let change;\n\n if (prevTotal === null) {\n change = null;\n } else {\n change = prevTotal ? ((averageForChange - prevTotal) * 10).toFixed(1) : 0;\n if (change.toString() === \"0.0\" || change.toString() === \"-0.0\") {\n change = null;\n prevTotal = null;\n }\n }\n\n if (change) {\n hasPrevious = true;\n }\n\n if (!isSportLaw) {\n return [\n `${item.q}`,\n `${getPrefix}${averageNormal}%`,\n \"--\",\n prevTotal && !isNaN(change) && isFinite(change) ? `${change}%` : \"--\",\n ];\n } else {\n return [\n `${item.q}`,\n `${getPrefix}${averageNormal}%`,\n \"--\",\n prevTotal && !isNaN(change) && isFinite(change) ? `${change}%` : \"--\",\n ];\n }\n });\n\n const overviewTable = {\n rows: tableTemplate,\n data: overviewTableData,\n };\n\n return (\n \n {question.title} Analysis \n \n Bacon ipsum dolor amet boudin pig tongue hamburger sausage cupim chuck\n tri-tip tail spare ribs brisket pork loin bresaola. Beef chislic doner\n swine, pork chop porchetta picanha spare ribs. Chicken jerky short ribs,\n pastrami pork fatback ground round spare ribs cow t-bone filet mignon\n hamburger leberkas shank. Meatball burgdoggen pork ribeye.\n */}\n\n \n Themes \n \n \n \n 1. {themesArray[index].pointTitleOne}:\n \n {themesArray[index].pointDescriptionOne}\n \n \n \n 2. {themesArray[index].pointTitleTwo}:\n \n {themesArray[index].pointDescriptionTwo}\n \n \n \n 3. {themesArray[index].pointTitleThree}:\n \n {themesArray[index].pointDescriptionThree}\n \n \n */}\n\n \n Question Analysis\n \n\n {/* \n Bacon ipsum dolor amet boudin pig tongue hamburger sausage cupim chuck\n tri-tip tail spare ribs brisket pork loin bresaola. Beef chislic doner\n swine, pork chop porchetta picanha spare ribs.\n */}\n\n {q.map((item, i) => {\n const questionData = data.filter((f) => Number(f.question) === i);\n // In some instances, 2 sets of charts are being displayed on the first\n // breakdown page, causing the table of contents to be off.\n const adjustPadding = i === 0;\n // const previousAvg = get_cat_average(i, dimension, item.id);\n return (\n \n \n {getFactor()} Question \n \n {i + 1}. {item.q}\n \n \n \n {/* \n This table contains overall performance metrics for the nuLogic\n Diversity, Equity, and Inclusion assessment. The following\n information appears on all nuLogic reports and is not specific\n to this organization's individual results\n */}\n\n \n Previous Score \n \n \n \n );\n })}\n \n \n );\n};\n\nexport default Breakdown;\n","import React from \"react\";\nimport { View, Text, Image, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport format from \"date-fns/format\";\n\nimport coverImage from \"../../assets/SL-white.png\";\n\nconst SportLawIntro = (props) => {\n const { selectedOrg } = props;\n\n const styles = StyleSheet.create({\n page: {\n position: \"relative\",\n height: \"100vh\",\n backgroundColor: \"#54297C\",\n },\n textarea: {\n position: \"absolute\",\n top: \"10%\",\n left: 80,\n color: \"white\",\n },\n title: {\n fontWeight: 700,\n fontSize: 30,\n width: 350,\n lineHeight: 1.2,\n },\n subTitle: {\n fontSize: 13,\n marginTop: 20,\n width: 350,\n lineHeight: 1.2,\n },\n bottom: {\n width: \"100vw\",\n height: 150,\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-evenly\",\n alignItems: \"flex-end\",\n position: \"absolute\",\n bottom: 0,\n },\n bar: {\n width: 7,\n borderRadius: 2.5,\n },\n sub1: {\n fontSize: 18,\n fontWeight: 500,\n marginTop: 15,\n marginBottom: 240,\n },\n img: {\n width: 150,\n marginLeft: 0,\n marginBottom: 75,\n },\n });\n\n const bars = [\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28,\n ];\n const colors = [\"#3e1d5c\", \"#260940\", \"#696969\"];\n\n const formatReportDate = (dateTime) => {\n return format(dateTime, \"MMMM do, yyyy\");\n };\n\n return (\n \n \n \n Culture Index \n Overview and Key Findings \n \n Generated by Sport Law for {selectedOrg} on \n {formatReportDate(new Date())}\n \n \n\n \n {bars.map((item) => (\n \n \n \n );\n};\n\nexport default SportLawIntro;\n","export default \"data:image/png;base64,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\"","export default __webpack_public_path__ + \"static/media/BarlowSemiCondensed-Light.6f66d7f1.ttf\";","import React from \"react\";\nimport { View, Text, StyleSheet, Font, Page } from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Segmentation from \"../../components/Segmentation\";\nimport { calculate_table_data } from \"../../../../reports/Audit/data_navigation/calculate_data\";\nimport Side from \"../../components/Side\";\nimport Footer from \"../../components/Footer\";\n\n/**\n *\n * @param {description: string, factors: string} props\n *\n * @returns\n */\nconst Methodology = (props) => {\n const { nav, categories, rule, structure, data, anchor, config } = props;\n\n // Create styles\n const styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n width: \"100%\",\n height: \"100vh\",\n position: \"relative\",\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 15,\n lineHeight: 1.7,\n },\n p2: {\n fontSize: 9,\n marginBottom: 10,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n fontWeight: 700,\n fontSize: 14,\n marginTop: 15,\n },\n section: {\n paddingTop: 10,\n paddingBottom: 10,\n paddingLeft: 20,\n paddingRight: 20,\n backgroundColor: \"#F1F1F7\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 16,\n },\n S1: {\n fontSize: 10,\n marginRight: 15,\n },\n img: {\n height: 20,\n },\n offset: {\n width: \"100%\",\n },\n summary: {\n border: \"2px solid #000921\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#000921\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n steps: {\n width: \"90%\",\n display: \"flex\",\n flexDirection: \"row\",\n marginBottom: 3,\n },\n square: {\n height: 6,\n width: 6,\n backgroundColor: \"#000921\",\n marginLeft: 20,\n marginRight: 10,\n marginTop: 5,\n },\n wrappingTitle: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2E34D0\",\n marginBottom: 15,\n },\n quote: {\n fontSize: 13,\n lineHeight: 1.7,\n textAlign: \"center\",\n alignItems: \"flex-end\",\n },\n author: {\n paddingTop: 10,\n width: \"100%\",\n fontSize: 10,\n lineHeight: 1.2,\n justifyContent: \"flex-start\",\n },\n quoteText: {\n fontWeight: 500,\n },\n quoteSection: {\n paddingTop: 35,\n paddingBottom: 15,\n paddingLeft: 15,\n paddingRight: 15,\n backgroundColor: \"#F1F1F7\",\n display: \"flex\",\n flexDirection: \"column\",\n marginTop: 25,\n marginBottom: 20,\n marginLeft: 20,\n width: \"45%\",\n height: 145,\n },\n numbered: { fontWeight: 500, marginRight: 10, fontSize: 9 },\n });\n\n const generate_table_data = () => {\n const anchors = categories.categories.filter((f) => f.id === anchor);\n return anchors.map((item) => {\n let _data = calculate_table_data(\n data,\n nav,\n categories,\n item.id,\n rule,\n structure\n );\n\n return {\n name: item.name,\n id: item.id,\n data: _data.overall,\n };\n });\n };\n\n const anchorGroup = categories.categories.find((cat) => cat.id === anchor);\n\n const introduction = (\n \n \n \n Introduction\n \n\n \n Since 2010, Sport Law has been advocating for a Management by Values\n leadership ethos to be promoted and rewarded in sport. To accelerate\n this work, Sport Law has been looking for a caring company to\n collaborate with to bring our vision of fostering a values-based\n culture to life. Even in the healthiest of workplaces, opportunities\n to provide meaningful feedback are often hard to find. Worse yet,\n people are concerned about providing truthful responses for fear of\n retribution. While sport organizations currently measure success in a\n limited fashion, there is a growing appetite to understand the health\n and effectiveness of their culture.\n \n \n \n \n \n “Culture eats strategy for breakfast.”\n \n - Peter Drucker \n \n \n \n );\n\n const sportIndex = (\n \n \n The Sport Culture Index\n \n \n The Sport Culture Index is an evidence-based assessment platform that\n quantifies culture in sport environments in the areas of safety,\n well-being, cohesion, empowerment, personalization, belonging, vision,\n values, environment, accountability, adaptability, and communication.\n Developed in 2020 by three sport psychology practitioners (PhD, MSc,\n MSc), an international level sport coach (MEd Leadership) and an Olympic\n level data analyst (MSc), the assessment leverages several validated\n psychometric scales and empirically validated concepts from sport and\n organizational psychology. The information provided by each respondent\n is aggregated to reveal powerful team and organizational trends.\n \n \n );\n\n const methodology = (\n \n \n Assessment Methodology\n \n \n The methodology of the Sport Culture Index (SCI) is grounded in evidence\n suggesting that most meaningful sport culture variables fall into two\n primary categories: people factors (i.e., dynamics, sentiments, and\n relationships) and performance factors (i.e., processes, practices, and\n structures). The SCI allows sport organizations to understand where they\n are indexing on the primary categories of people and performance\n factors, helping them gain an understanding of their overall approach.\n Ultimately, the goal of this report is to provide reliable,\n evidence-based information to guide cultural action steps and\n transformation strategies.\n \n \n );\n\n const segmentation = (\n \n \n Segmentation By {anchorGroup.name}\n \n \n );\n\n const nextSteps = (\n \n \n How to create change using this report\n \n \n Changing culture is a process, not an event. Therefore, this report\n alone is not a sufficient culture change strategy. The effectiveness of\n this report, like all data, ultimately rests on your willingness to\n reflect, engage, and commit to action. Here are some keys to keep in\n mind as you work to turn the data into transformation.\n \n \n 1. \n \n Establish a sense of urgency. \n Examine the findings of this report with a factual lens.\n Productive change begins when you have the discipline to confront the\n facts of your current reality, whatever they might be.\n \n \n \n 2. \n \n Set your priorities. \n As Brene Brown suggests in her book Dare to Lead, “if you\n have more than three priorities, you have no priorities”. Resist the\n urge to boil the ocean, and rather, hone in on a few key areas you\n have the capacity to impact over the coming months.\n \n \n \n 3. \n \n Form a guiding coalition. \n Assemble a diverse, representative, and influential group\n to lead the change effort. Bring this team together to drive ideation\n in an open and honest way based on the priorities from the report, and\n ensure they are empowered to act on the groups vision.\n \n \n \n 4. \n \n Create short term wins. \n Begin to implement initiatives that are visible and\n obvious based on the feedback provided in the report. These don't have\n to be monumental, but rather little changes that send a signal that\n things are in motion and the feedback provided is making a difference\n right away.\n \n \n \n 5. \n \n Strategize long term success. \n In the midst of celebrating short term culture wins,\n continue to plan bigger initiatives that will be instilled more\n gradually.\n \n \n \n 6. \n \n \n Monitor and communicate progress.\n \n An essential part of fostering high trust cultures is to commit to\n continuous improvement and to share your progress with your community.\n The Sport Culture Index provides you with meaningful data that you can\n use to make small changes, refine current strategies, eliminate\n initiatives that aren’t working and address risks proactively.\n Communicating your progress to your community will foster trust and\n trust is the one thing that can change everything.\n \n \n \n );\n\n return (\n \n \n Report Methods \n \n Innerlogic is a company that helps organizations measure the state of\n their culture. Partnering with Sport Law became a powerful way to\n evolve their innovative technology. The two companies have joined\n forces to provide sport leaders with the knowledge they need to make\n evidence- based, strategic, and ethical decisions by measuring their\n organizational culture’s health. Beyond measuring money and medals, we\n believe that sport organizations can better fulfill their mission by\n also measuring how well their values are being lived. We believe that\n a healthy culture must be intentionally created to ensure the\n wellbeing of employees, athletes, coaches, officials, and volunteers.\n But first, leaders must be aware of how their culture is performing.\n \n {sportIndex}\n {methodology}\n {segmentation}\n {nextSteps}\n \n \n );\n};\n\nFont.register({\n family: \"Barlow\",\n fonts: [{ src: Barlow }],\n});\n\nMethodology.propTypes = {\n companyLogo: PropTypes.string,\n introTemplate: PropTypes.number,\n coverImage: PropTypes.string,\n coverHeading: PropTypes.string,\n coverSubtitle: PropTypes.string,\n metadata: PropTypes.object,\n};\n\nexport default Methodology;\n","import React from \"react\";\nimport { Text, View, StyleSheet } from \"@react-pdf/renderer\";\nimport { getGrade } from \"../../utils/cultureUtils\";\nimport Table from \"../../components/Table\";\n\nconst Segmentation = (props) => {\n const {\n categories,\n calculated,\n hideText = false,\n dummyData,\n config,\n rule = 2,\n isSportLaw,\n } = props;\n\n const getRoleName = (anchor, id) => {\n return categories.categories\n .find((f) => f.id === anchor)\n .options.find((f) => f.id === id)?.name;\n };\n\n return calculated.map((item, i) => {\n const tableData = Object.keys(item.data).map((k) => {\n if (item.data[k].n1 > rule) {\n const roleName = getRoleName(item.id, k);\n if (!roleName) {\n return null;\n }\n return [`${roleName}`, `${item.data[k].n1}`];\n }\n return null;\n });\n\n // Filter out any empty results and show table data only if\n // data is available.\n if (tableData.filter((item) => item !== null).length === 0) {\n return null;\n }\n\n const tableTemplate = [\n { title: `${item.name}`, width: \"50%\" },\n { title: \"Sample Size\", width: \"50%\" },\n ];\n\n let tableContent = {\n rows: tableTemplate,\n data: tableData,\n };\n\n // sort table data\n function sortFunction(a, b) {\n if (Number(a[1]) === Number(b[1])) {\n return 0;\n } else {\n return Number(a[1]) > Number(b[1]) ? -1 : 1;\n }\n }\n\n // update the table content with sorted data\n tableContent.data = tableContent?.data?.sort(sortFunction);\n\n return (\n \n {!hideText && (\n \n \n Table {i + 1}. {item.name}\n \n {/* \n These grades are calculated based on traditional school grading (B\n is equal to 83-86%) scales. They are designed to give an intuitive\n sense of the overall scoring.\n */}\n \n )}\n \n );\n });\n};\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n },\n});\n\nexport default Segmentation;\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet } from \"@react-pdf/renderer\";\nimport { calculate_table_data } from \"../../../../reports/Audit/data_navigation/calculate_data\";\nimport Segmentation from \"./Segmentation\";\nimport Footer from \"../../components/Footer\";\nimport Side from \"../../components/Side\";\n\nconst Overview = (props) => {\n const {\n nav,\n categories,\n rule,\n structure,\n reportData,\n anchor,\n config,\n isSportLaw,\n } = props;\n const generate_table_data = () => {\n const anchors = categories.categories.filter(\n (f) =>\n f.priority !== \"primary\" &&\n f.id !== anchor &&\n f.priority !== \"personality\"\n );\n\n return anchors.map((item) => {\n let _data = calculate_table_data(\n reportData,\n nav,\n categories,\n item.id,\n rule,\n structure\n );\n\n return {\n name: item.name,\n id: item.id,\n data: _data.overall,\n };\n });\n };\n\n return (\n \n Demographic Analysis \n \n Bacon ipsum dolor amet boudin pig tongue hamburger sausage cupim chuck\n tri-tip tail spare ribs brisket pork loin bresaola. Beef chislic doner\n swine, pork chop porchetta picanha spare ribs. Chicken jerky short ribs,\n pastrami pork fatback ground round spare ribs cow t-bone filet mignon\n hamburger leberkas shank. Meatball burgdoggen pork ribeye.\n */}\n \n \n \n \n );\n};\n\nexport default Overview;\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n },\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2C6CF5\",\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n container: {\n paddingTop: 20,\n },\n});\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n marginBottom: 30,\n position: \"relative\",\n marginTop: 20,\n },\n bottom: {\n width: \"85%\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n row: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n },\n title: {\n width: \"22%\",\n display: \"flex\",\n alignItems: \"flex-start\",\n textAlign: \"left\",\n paddingRight: 5,\n fontSize: 10,\n borderRight: \"1px solid #2C3644\",\n paddingTop: 2,\n paddingBottom: 2,\n color: \"#2C3644\",\n },\n bar: {\n height: 8,\n opacity: 0.9,\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n paddingTop: 2,\n paddingBottom: 2,\n },\n score: {\n fontSize: 10,\n fontWeight: 700,\n marginLeft: 8,\n position: \"absolute\",\n right: -25,\n top: -2,\n opacity: 1,\n color: \"#2C3644\",\n },\n lines: {\n position: \"absolute\",\n left: \"20%\",\n height: \"100%\",\n width: \"calc(80% + 20px)\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n line: {\n height: \"calc(100% + 10px)\",\n width: 1,\n borderLeft: \"0.5px dashed black\",\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n chart: {\n position: \"relative\",\n },\n text: {\n position: \"absolute\",\n top: -35,\n left: -25,\n fontSize: 7,\n color: \"grey\",\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"column\",\n width: 50,\n textAlign: \"center\",\n },\n norm: {\n position: \"absolute\",\n height: \"100%\",\n width: \"100%\",\n left: \"20%\",\n },\n});\n\n/**\n * Returns the average, and reverse scoring as per new specs\n * @param {number} avg current average\n * @param {*} item object containing data regarding question type\n */\nconst getTableAvg = (avg, item) => {\n // if (item && item.reverse) {\n // return 100 - avg;\n // }\n\n return avg;\n};\n\nconst Chart = (props) => {\n const { question, data, barColor, questionId } = props;\n\n const chartData = data?.anchorQuestionData?.map((item) => {\n return {\n label: item?.optionLabel,\n average: Number(item?.average) * 10,\n };\n });\n\n const sortedChartData = chartData?.sort((a, b) => {\n return b.average - a.average;\n });\n\n return (\n \n \n {sortedChartData?.map((item) => {\n const average = item?.average;\n const label = item?.label;\n\n return (\n \n {label} \n \n {Math.floor(average) + \"%\"} \n \n \n );\n })}\n \n \n );\n};\n\nexport default Chart;\n","import React, { useEffect, useState } from \"react\";\nimport { View, Text, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport Table from \"../components/Table\";\nimport OutcomesChart from \"../components/OutcomesChart\";\nimport Footer from \"../components/Footer\";\nimport Side from \"../components/Side\";\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n color: \"#2C3644\",\n },\n p: {\n fontSize: 11,\n lineHeight: 1.7,\n marginBottom: 10,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#2C3644\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#2C3644\",\n marginTop: 5,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 15,\n },\n section: {\n paddingTop: 20,\n paddingBottom: 20,\n paddingLeft: 30,\n paddingRight: 30,\n backgroundColor: \"#F0F5FE\",\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 13,\n marginBottom: 5,\n },\n question: {\n fontSize: 9.5,\n lineHeight: 1.7,\n },\n S1: {\n fontSize: 10,\n marginRight: 15,\n },\n img: {\n height: 20,\n },\n offset: {\n width: \"100%\",\n },\n summary: {\n border: \"2px solid #2C6BAA\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#2C6BAA\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n },\n legendText: {\n fontSize: 9,\n lineHeight: 1.7,\n marginTop: -6,\n marginLeft: 13,\n },\n legendWrapper: {\n flexDirection: \"row\",\n display: \"flex\",\n },\n legend: {\n width: 10,\n lineHeight: 1.9,\n borderBottomColor: \"black\",\n borderBottomWidth: 1,\n borderBottomStyle: \"dotted\",\n },\n themeSection: {\n // marginTop: 20,\n // marginBottom: 20,\n },\n themeTitle: {\n fontSize: 10,\n fontWeight: 700,\n color: \"#2C3644\",\n // marginBottom: 10,\n },\n themeWrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: 8,\n // lineHeight: 1.7,\n },\n themeText: {\n marginBottom: 5,\n },\n boldedTheme: {\n fontWeight: 700,\n },\n});\n\nconst getOutcomeQuestionAverage = (data, i) => {\n const outcomeQuestionAverage =\n Number(data?.questionData?.[i]?.overallQuestionAverage) * 10;\n return outcomeQuestionAverage;\n};\n\nconst Breakdown = (props) => {\n const { outcome, isSportLaw, data, config } = props;\n\n const tableTemplate = !isSportLaw\n ? [\n { title: \"Question\", width: \"68%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"12%\" },\n ]\n : [\n { title: \"Question\", width: \"70%\" },\n { title: \"Score\", width: \"10%\" },\n { title: \"Norm\", width: \"10%\" },\n { title: \"Change\", width: \"10%\" },\n ];\n\n if (!data) {\n return null;\n }\n\n const overviewTableData = outcome?.questions?.map((item, i) => {\n const average = getOutcomeQuestionAverage(data[data?.length - 1], i);\n\n if (!isSportLaw) {\n return [`${item.question}`, `${average}%`, \"--\", \"--\"];\n } else {\n return [`${item.question}`, `${average}%`, \"--\", \"--\"];\n }\n });\n\n const overviewTable = {\n rows: tableTemplate,\n data: overviewTableData,\n };\n\n return (\n \n {outcome?.name} Analysis \n \n Bacon ipsum dolor amet boudin pig tongue hamburger sausage cupim chuck\n tri-tip tail spare ribs brisket pork loin bresaola. Beef chislic doner\n swine, pork chop porchetta picanha spare ribs. Chicken jerky short ribs,\n pastrami pork fatback ground round spare ribs cow t-bone filet mignon\n hamburger leberkas shank. Meatball burgdoggen pork ribeye.\n */}\n\n \n Question Analysis\n \n\n {outcome?.questions?.map((item, i) => {\n const adjustPadding = i === 0;\n return (\n \n \n {outcome?.name} Question \n \n {i + 1}. {item.question}\n \n \n \n \n \n );\n })}\n\n \n \n );\n};\n\nexport default Breakdown;\n","/// Libraries\nimport React from \"react\";\nimport { Document, StyleSheet, Font } from \"@react-pdf/renderer\";\n\n// Components\nimport Intro from \"./Intro\";\nimport Methodology from \"./Methodology\";\nimport Risks from \"./Risks\";\nimport Overview from \"./Overview\";\nimport TableOfContents from \"./TableOfContents\";\nimport FeedbackSection from \"./Feedback\";\nimport FactorOverview from \"./FactorOverview\";\nimport CultureMap from \"./CultureMap\";\nimport Breakdown from \"./Breakdown\";\nimport SportLawIntro from \"./SportLaw/SportLawIntro\";\nimport SportLawMethodology from \"./SportLaw/MethodologySL\";\nimport SportLawOverview from \"./SportLaw/Overview\";\nimport OutcomesBreakdown from \"./OutcomesBreakdown\";\n\n// Templates\nimport defaultTemplate from \"../templates/default.json\";\nimport sportLawTemplate from \"../templates/sport-law.json\";\nimport OTPTemplate from \"../templates/OTP.json\";\n\n// Utils\nimport { getFeedback } from \"../utils/cultureUtils\";\n\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\nimport PoppinsBold from \"assets/fonts/Poppins-Bold.ttf\";\nimport PoppinsMedium from \"assets/fonts/Poppins-Medium.ttf\";\nimport PoppinsRegular from \"assets/fonts/Poppins-Regular.ttf\";\nimport PoppinsItalic from \"assets/fonts/Poppins-LightItalic.ttf\";\n// import Infograph from \"./Infograph\";\n\nFont.register({\n family: \"Poppins\",\n fonts: [\n { src: Poppins },\n { src: PoppinsItalic, fontWeight: 200 },\n { src: PoppinsBold, fontWeight: 700 },\n { src: PoppinsMedium, fontWeight: 500 },\n { src: PoppinsRegular, fontWeight: 400 },\n ],\n format: \"truetype\",\n});\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n padding: 60,\n paddingHorizontal: 80,\n fontFamily: \"Poppins\",\n },\n section: {\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n pageNumber: {\n position: \"absolute\",\n fontSize: 12,\n bottom: 30,\n left: 0,\n right: 0,\n textAlign: \"center\",\n color: \"grey\",\n },\n title: {\n fontSize: 40,\n textAlign: \"center\",\n },\n image: {\n marginVertical: 15,\n marginHorizontal: 100,\n },\n table: {\n marginHorizontal: 10,\n },\n subHeading: {\n fontSize: 12,\n paddingBottom: 50,\n },\n spiderSubHeading: {\n fontSize: 12,\n paddingBottom: 30,\n display: \"flex\",\n textAlign: \"center\",\n zIndex: 999,\n },\n heading: {\n paddingBottom: \"15px\",\n left: 0,\n fontSize: 22,\n fontWeight: 500,\n },\n doc: {\n fontFamily: \"Poppins\",\n fontSize: 14,\n },\n spiderImage: {\n left: 55,\n top: -28,\n maxHeight: 300,\n maxWidth: 400,\n height: 300,\n width: 400,\n zIndex: -99,\n },\n spiderHeading: {\n fontSize: 18,\n paddingBottom: 10,\n fontWeight: 500,\n },\n});\n\nconst Template = (props) => {\n const {\n chart,\n nav,\n categories,\n rule,\n structure,\n data,\n reportData,\n calculated,\n anchor,\n config,\n selectedReport,\n selectedOrg,\n WhiteLabel,\n filterData,\n overview,\n spiderOptions,\n spiderTwoOptions,\n sportName,\n // dialOne,\n } = props;\n\n const { introTemplate } = config?.[0].data;\n const orgTemplate =\n introTemplate === 2\n ? sportLawTemplate\n : introTemplate === 3\n ? OTPTemplate\n : defaultTemplate;\n\n const isSportLaw = introTemplate === 2;\n\n // Table of Contents Util functions\n const getFactor = (dimension, factor) => {\n return structure.dimensions[dimension].factors.find((f) => f.id === factor)\n .title;\n };\n\n const getSelectedSportId = (data) => {\n const responseSample = data.responses;\n\n const selectedCategory = responseSample?.[0].categories.find(\n (category) => category.priority === \"primary\"\n );\n return selectedCategory;\n };\n\n const selectedSport = getSelectedSportId(reportData?.[0]);\n const prevDataFiltered = selectedSport?.subfactor\n ? filterData?.filter_data_last?.filter(\n (fd) =>\n fd?.categories?.find((cat) => cat.priority === \"primary\")\n .subfactor === selectedSport.subfactor\n )\n : filterData?.filter_data_last;\n\n let numberOfValidCategoriesGlobal = 0;\n const getQuestionSection = (dimension, factor) => {\n let numberOfValidCategories = 0;\n const arrayOfValidCategories = calculated?.responses\n ?.filter((resp) => resp.average > 0)\n .map((result) => result.role);\n\n if (numberOfValidCategoriesGlobal === 0) {\n arrayOfValidCategories.forEach((element, index) => {\n if (arrayOfValidCategories.indexOf(element) === index) {\n numberOfValidCategoriesGlobal += 1;\n }\n });\n }\n arrayOfValidCategories.forEach((element, index) => {\n if (arrayOfValidCategories.indexOf(element) === index) {\n numberOfValidCategories += 1;\n }\n });\n\n const QUESTIONS_PER_PAGE = numberOfValidCategories > 1 ? 2 : 3;\n // Questions are Min/Max Width of 300, this guarentees a maximum of 2 qustions per page\n\n const questionTotals = get_question_list(\n dimension,\n factor,\n structure\n ).length;\n const fullPages =\n Math.floor(questionTotals / QUESTIONS_PER_PAGE) +\n (numberOfValidCategories === 1 ? 1 : 0);\n const partialPages = QUESTIONS_PER_PAGE % questionTotals > 0 ? 1 : 0;\n\n return {\n title: getFactor(dimension, factor),\n pages: fullPages + partialPages,\n };\n };\n\n const get_question_list = (dimension, factor, questions) => {\n return questions.dimensions[dimension].factors.find((f) => f.id === factor)\n .questions;\n };\n\n // const subSectionOne =\n // calculated?.responses?.length > 0 &&\n // structure.dimensions[0].factors.map((item, i) => {\n // return getQuestionSection(0, item.id);\n // });\n\n // const subSectionTwo =\n // calculated?.responses?.length > 0 &&\n // structure.dimensions[1].factors.map((item, i) => {\n // return getQuestionSection(1, item.id);\n // });\n\n const getDimensionsAvg = (data, dimension) => {\n const averages = data.summary?.filter(\n (factorSummary) => factorSummary.dimension === dimension.toString()\n );\n\n let total = 0;\n averages.forEach((avg) => {\n total = total + avg.average;\n });\n\n return (total / averages.length) % 1 === 0\n ? total / averages.length\n : (total / averages.length).toFixed(2);\n };\n\n const humanFactorsAvg = getDimensionsAvg(calculated, 0);\n const systemFactorsAvg = getDimensionsAvg(calculated, 1);\n const anchorGroup = categories.categories.find((cat) => cat.id === anchor);\n let totalResponses = 0;\n\n Object.keys(calculated.overall).forEach((k) => {\n totalResponses = totalResponses + calculated.overall[k].n1;\n });\n\n const showFeedbackSection = () => {\n let showFeedback = false;\n\n const options = props.structure?.comments\n ?.filter((item, i) => item?.response?.length > 0)\n .map((item, i) => {\n return {\n text: item.question,\n value: i,\n };\n });\n\n options?.forEach((option, i) => {\n const feedbackData = getFeedback(\n option.value,\n props.categories,\n props.filterData.filter_data,\n props.structure\n );\n if (feedbackData && feedbackData.length > 0) {\n showFeedback = true;\n }\n });\n return showFeedback;\n };\n\n const getIntroTemplate = (templateId = 1) => {\n switch (templateId) {\n case 2:\n return (\n \n {/* INTRO PAGE */}\n {intro}\n\n {/* \n );\n};\n\nexport default Template;\n","export const getColConfig = (categories, lang, translations) => {\n const primaryOptions = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n\n return primaryOptions.options.map((po) => {\n return {\n name: lang === \"en\" ? po.name : po.fr, \n color: po.color,\n subfactors: po.subfactors,\n id: po.id,\n };\n });\n};\n\nexport const getNSOTableData = (\n data,\n categories,\n structure,\n config,\n lang,\n translations\n) => {\n const isFrench = lang === \"fr\";\n\n const tableData = structure.dimensions.map((d) => {\n const dimensionResponses = data?.summary?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const dimensionResponsesForOverall = data?.raw?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: isFrench\n ? ao?.fr.charAt(0).toUpperCase()\n : ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n\n const dimensionData = d.factors\n .map((f) => {\n const factorResponses = dimensionResponses.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n const factorResponsesForOverall = dimensionResponsesForOverall.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n let n = 0;\n const factorAvg =\n factorResponsesForOverall.reduce((total, b) => {\n n += b.raw?.length;\n\n return total + b.raw?.reduce((acc, curr) => acc + curr, 0);\n }, 0) / n || null;\n\n const factorColumns = tableGroups.map((g) => {\n return {\n average: factorResponses.find((fr) => fr.secondary === g.id)\n ?.average,\n id: g.id,\n };\n });\n\n return {\n factor: isFrench ? f.fr : f.title,\n factorAverage: factorAvg,\n factorResponses: factorColumns,\n };\n })\n .sort((a, b) => b.factorAverage - a.factorAverage);\n\n let n = 0;\n let overallDimAverage = 0;\n\n dimensionData.forEach((dd) => {\n if (dd.factorAverage) {\n n++;\n overallDimAverage += dd.factorAverage;\n }\n });\n\n if (n > 0 && overallDimAverage > 0) {\n overallDimAverage = overallDimAverage / n;\n }\n\n return {\n dimension: isFrench ? d.fr : d.title,\n dimensionId: d.id,\n dimensionAvg: overallDimAverage,\n data: dimensionData,\n };\n });\n\n return tableData;\n};\n\n// Breakdown data charts.\nexport const getOTPTableData = (\n data,\n categories,\n structure,\n config,\n lang,\n translations\n) => {\n const isFrench = lang === \"fr\";\n const tableData = structure.dimensions.map((d) => {\n const dimensionResponses = data?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n let nationalAverage = {};\n dimensionResponses.forEach((dr) => {\n if (dr?.role) {\n if (!nationalAverage[dr.role]?.n) {\n nationalAverage[dr.role] = {\n n: dr?.n || 0,\n sum: dr?.average ? dr?.average * dr?.n : 0,\n };\n } else {\n nationalAverage[dr.role].n += dr?.n || 0;\n nationalAverage[dr.role].sum += dr?.average ? dr?.average * dr?.n : 0;\n }\n }\n });\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n // loop through config to get categorized data\n const dimensionInfo = config.map((ci) => {\n const primaryLabel = ci.name;\n let primaryResponses = [];\n let sportAverage = {};\n dimensionResponses.forEach((dr) => {\n const matchingResponses = dr.primaryData.filter(\n (fpd) => ci.id === fpd.group\n );\n primaryResponses.push({\n responses: matchingResponses,\n role: dr.role,\n primary: primaryLabel,\n });\n });\n\n return {\n primary: primaryLabel,\n responses: primaryResponses,\n id: ci.id,\n };\n });\n\n let nationalSum = 0;\n let nationalNValue = 0;\n const nationalAvgRows = tableGroups.map((tg) => {\n const currentGroup = nationalAverage[tg.id];\n const roleAvg = currentGroup?.sum ? currentGroup.sum / currentGroup.n : 0;\n nationalSum += nationalAverage[tg.id]?.sum || 0;\n nationalNValue += nationalAverage[tg.id]?.n || 0;\n return {\n id: tg.id,\n average: roleAvg,\n };\n });\n\n const nationalAvg = nationalSum / nationalNValue;\n\n const nationalAverageRow = {\n factor: getTranslatedText(\"nationalAverage\", lang, translations),\n factorAverage: nationalAvg,\n factorResponses: nationalAvgRows,\n rowId: 0,\n };\n\n const dimensionData = config.map((ci) => {\n // get list of all responses related to current category.\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses.map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const ciAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n const rowCols = tableGroups.map((tg) => {\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses\n .filter((dir) => dir.role === tg.id)\n .map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const roleAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n return {\n id: tg.id,\n average: roleAvg,\n };\n });\n\n return {\n factor: ci.name,\n factorAverage: ciAvg,\n factorResponses: rowCols,\n rowId: ci.id,\n };\n });\n\n dimensionData.unshift(nationalAverageRow);\n\n return {\n dimension: isFrench ? d.fr : d.title,\n dimensionId: d.id,\n dimensionAvg: null,\n data: dimensionData,\n };\n });\n\n return tableData;\n};\n\nexport const getSecondaryLabel = (id, categories) => {\n const secondaryItems = categories.categories.find(\n (c) => c.priority === \"secondary\"\n );\n const label = secondaryItems?.options?.find((o) => o.id === id);\n\n return label;\n};\n\nexport const buildRankingTables = (\n data,\n categories,\n question,\n dimension,\n type,\n isFrench,\n translations\n) => {\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorName = categories.categories?.find(\n (ao) => ao.priority === \"secondary\"\n );\n let colWidth;\n const title =\n type === \"highest\"\n ? getTranslatedText(\"highestLWC\", lang, translations)\n : getTranslatedText(\"lowestLWC\", lang, translations);\n\n const tableTemplate = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? anchor?.fr.charAt(0).toUpperCase()\n : anchor.name.charAt(0).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n\n tableTemplate.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplate.unshift({\n title: getTranslatedText(\"domain\", lang, translations),\n width: \"25%\",\n });\n tableTemplate.unshift({ title, width: \"46%\" });\n\n const dimensionData = [];\n data.forEach((d) => {\n if (d.dimension === dimension) {\n dimensionData.push(d);\n }\n });\n\n const dimensionQuestions = [];\n const dimensionTalley = [];\n\n dimensionData.forEach((dd) => {\n if (\n !dimensionTalley.find(\n (dt) => dt.question === dd.question && dt.section === dd.section\n )\n ) {\n const factorLabel = getFactorLabel(dd, question, isFrench);\n dimensionTalley.push(dd);\n dimensionQuestions.push({\n question: dd.question,\n dimension: dd.dimension,\n section: dd.section,\n factor: factorLabel,\n });\n }\n });\n\n const dimensionAverages = dimensionQuestions\n .map((dq) => {\n let reverse = false;\n const questionResponses = data\n .filter(\n (dd) =>\n dd.question === dq.question &&\n dd.dimension === dq.dimension &&\n dd.section === dq.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r, question)) {\n reverse = true;\n }\n });\n\n let n = 0;\n\n const questionAvg =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: dq,\n average: questionAvg,\n groups: questionResponses,\n reverse: reverse,\n };\n })\n .sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (a.reverse) {\n aAverage = 100 - aAverage;\n }\n\n if (b.reverse) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const rankData = dimensionAverages\n .filter((item) => item?.groups?.length > 0)\n .filter((da) => {\n let n = 0;\n const avg =\n (da.groups.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) /\n n) *\n 10 || 0;\n\n const average = da.reverse ? 100 - (avg * 10) / 10 : avg / 10;\n return average < 10; // Should be whitelabel config value.\n })\n .map((item) => {\n let n = 0;\n const avg =\n item.groups.reduce((total, b) => {\n n += b.n;\n\n return total + b.average * b.n;\n }, 0) / n || 0;\n const average = (avg * 10) / 10;\n const averagePrefix = item.reverse ? \"**\" : \"\";\n\n const tableData = tableTemplate.map((t) => {\n if (t.title === getTranslatedText(\"domain\", lang, translations)) {\n return `${item.question.factor}`;\n }\n if (t.title === \"AV\") {\n return `${average.toFixed(1)}${averagePrefix}`;\n }\n if (!t.id) {\n return `${fetchQuestion(item.groups[0], question, isFrench)}`;\n }\n\n const groupData = item.groups.filter((g) => g.role === t.id);\n\n const itemAverage =\n (groupData?.length > 0 &&\n groupData.reduce((total, b) => {\n return total + b.average;\n }, 0)) ||\n null;\n\n const group =\n (groupData.length > 0 &&\n (!isNaN(itemAverage) && itemAverage / groupData.length) * 10) ||\n null;\n\n if (groupData?.length === 0) {\n return -1;\n }\n const groupAverage = group / 10;\n return `${groupAverage.toFixed(1)}`;\n });\n\n return tableData;\n });\n\n const rankedData =\n type === \"highest\"\n ? rankData.slice(0, 5)\n : rankData.reverse().slice(0, 5).reverse();\n\n return rankedData;\n};\n\nexport const buildOverallRankingTables = (\n data,\n categories,\n question,\n type,\n isFrench,\n translations\n) => {\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorName = categories.categories?.find(\n (ao) => ao.priority === \"secondary\"\n );\n\n let colWidth;\n const title =\n type === \"highest\"\n ? getTranslatedText(\"highestLWC\", lang, translations)\n : getTranslatedText(\"lowestLWC\", lang, translations);\n\n const tableTemplate = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? anchor?.fr.charAt(0).toUpperCase()\n : anchor.name.charAt(0).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n\n tableTemplate.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplate.unshift({\n title: getTranslatedText(\"domain\", lang, translations),\n width: \"25%\",\n });\n tableTemplate.unshift({ title, width: \"46%\" });\n\n const dimensionData = [];\n data.forEach((d) => {\n dimensionData.push(d);\n });\n\n const dimensionQuestions = [];\n const dimensionTalley = [];\n\n dimensionData.forEach((dd) => {\n if (\n !dimensionTalley.find(\n (dt) =>\n dt.question === dd.question &&\n dt.section === dd.section &&\n dt.dimension === dd.dimension\n )\n ) {\n const factorLabel = getFactorLabel(dd, question, isFrench);\n dimensionTalley.push(dd);\n dimensionQuestions.push({\n question: dd.question,\n dimension: dd.dimension,\n section: dd.section,\n factor: factorLabel,\n });\n }\n });\n\n const dimensionAverages = dimensionQuestions\n .map((dq) => {\n let reverse = false;\n const questionResponses = data\n .filter(\n (dd) =>\n dd.question === dq.question &&\n dd.dimension === dq.dimension &&\n dd.section === dq.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r, question)) {\n reverse = true;\n }\n });\n\n let n = 0;\n\n const questionAvg =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: dq,\n average: questionAvg,\n groups: questionResponses,\n reverse: reverse,\n };\n })\n .sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (a.reverse) {\n aAverage = 100 - aAverage;\n }\n\n if (b.reverse) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const rankData = dimensionAverages\n .filter((item) => item?.groups?.length > 0)\n .filter((item) => {\n let n = 0;\n const avg =\n (item.groups.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) /\n n) *\n 10 || 0;\n const average = item.reverse ? 100 - (avg * 10) / 10 : avg / 10;\n return average < 10; // Should be whitelabel config value.\n })\n .map((item) => {\n let n = 0;\n const avg =\n item.groups.reduce((total, b) => {\n n += b.n;\n\n return total + b.average * b.n;\n }, 0) / n || 0;\n const average = (avg * 10) / 10;\n const averagePrefix = item.reverse ? \"**\" : \"\";\n\n const tableData = tableTemplate.map((t) => {\n if (t.title === getTranslatedText(\"domain\", lang, translations)) {\n return `${item.question.factor}`;\n }\n if (t.title === \"AV\") {\n return `${average.toFixed(1)}${averagePrefix}`;\n }\n if (!t.id) {\n return `${fetchQuestion(item.groups[0], question, isFrench)}`;\n }\n\n const groupData = item.groups.filter((g) => g.role === t.id);\n\n const group =\n (groupData.reduce((total, b) => {\n return total + b.average;\n }, 0) /\n groupData.length) *\n 10 || 0;\n const groupAverage = group / 10;\n\n return `${groupAverage.toFixed(1)}`;\n });\n\n return tableData;\n });\n\n const rankedData =\n type === \"highest\"\n ? rankData.slice(0, 5)\n : rankData.reverse().slice(0, 5).reverse();\n\n return rankedData;\n};\n\nexport const getOptions = (\n dimension = 0,\n calculatedData,\n questionStructure\n) => {\n let averages = calculatedData.summary?.filter(\n (factorSummary) => factorSummary.dimension === dimension.toString()\n );\n\n let factors = questionStructure.dimensions[dimension]?.factors?.map(\n (factor) => {\n return factor.title;\n }\n );\n\n // TODO: When additional data is needed, update this map to return\n // other properties, such as Norm & Change from prev\n let factorOverview = factors?.map((item, i) => {\n if (i + 1 > averages.length) {\n return null;\n }\n const factorAverage = averages\n .filter((avg) => Number(avg.factor) === i)\n .map((avgItem) => avgItem.average);\n\n return {\n factor: item,\n average: getAverage(factorAverage),\n id: i,\n };\n });\n\n return factorOverview;\n};\n\nconst getAverage = (data) => {\n let total = 0;\n let n = 0;\n data.map((i) => {\n total += i;\n n += 1;\n });\n\n return total / n;\n};\n\nconst fetchQuestion = (q, question, isFrench) => {\n const questionFound =\n question?.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ];\n\n return isFrench ? questionFound?.fr : questionFound?.q;\n};\n\nconst isQuestionBinary = (q, question) => {\n return question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.binary;\n};\n\nconst fetchReverseOption = (q, question) => {\n return question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.reverse;\n};\n\nconst getFactorLabel = (q, question, isFrench) => {\n return isFrench\n ? question.dimensions[q.dimension].factors[Number(q.section)]?.fr\n : question.dimensions[q.dimension].factors[Number(q.section)].title;\n};\n\nexport const getTranslatedText = (\n textId,\n language,\n translationObj,\n subtext = false\n) => {\n const text = translationObj[textId];\n if (subtext) {\n return text.subtext[language];\n }\n if (text) {\n return text[language];\n }\n return textId;\n};\n\nexport const navigationMap = [\n {\n page: 1,\n title: \"Physical health and well-being\",\n fr: \"Santé physique et bien-être\",\n },\n {\n page: 2,\n title: \"Physical safety and safe sport\",\n fr: \"Sécurité physique et sport sécuritaire\",\n },\n { page: 3, title: \"Self-determination\", fr: \"Autodétermination\" },\n {\n page: 4,\n title: \"Mental health and well-being\",\n fr: \"Santé mentale et bien-être\",\n },\n { page: 5, title: \"Psychological safety\", fr: \"Sécurité psychologique\" },\n {\n page: 11,\n title: \"daily training environment\",\n fr: \"Environnement d’entraînement quotidien\",\n },\n { page: 12, title: \"coaching\", fr: \"Entraînement\" },\n { page: 13, title: \"leadership\", fr: \"leadership\" },\n { page: 14, title: \"pathways and profiles\", fr: \"Cheminements et profils\" },\n {\n page: 15,\n title: \"sport science and sport medicine\",\n fr: \"Sciences du sport et médecine du sport\",\n },\n {\n page: 16,\n title: \"athletes and international results\",\n fr: \"Athlètes et résultats internationaux\",\n },\n];","import React from \"react\";\nimport { View, Text, Image, StyleSheet, Page } from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\nimport format from \"date-fns/format\";\n\nimport coverImage from \"assets/images/otp/Logo.png\";\nimport statsContainer from \"../../assets/stats-container.png\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nfunction formatDate(dateString) {\n const options = { year: 'numeric', month: 'long', day: 'numeric' };\n const event = new Date(dateString);\n return event.toLocaleDateString('en-US', options);\n}\n\nconst Intro = (props) => {\n const { completionRate, surveyDate } = props;\n let imgCover;\n let coverTitle;\n let subtitle;\n let templateType = 1;\n let orgSuffix;\n const lang = props.isFrench ? \"fr\" : \"en\";\n\n templateType = 1;\n imgCover = null;\n subtitle = getTranslatedText(\"coverSubTitle\", lang, translations);\n coverTitle =\n props?.coverTitle || getTranslatedText(\"coverTitle\", lang, translations);\n if (props.selectedReport) {\n orgSuffix = `/ ${props.selectedReport.name}`;\n }\n \n\n if (props.overview) {\n orgSuffix =\n props.anchor.name.toLowerCase() === \"sport\"\n ? getTranslatedText(\"allSports\", lang, translations)\n : getTranslatedText(\"avgAllSports\", lang, translations);\n }\n\n const styles = StyleSheet.create({\n page: {\n position: \"relative\",\n height: \"100vh\",\n backgroundColor: \"white\",\n },\n textarea: {\n position: \"absolute\",\n top: \"6%\",\n left: 80,\n color: \"black\",\n },\n title: {\n fontWeight: 700,\n fontSize: 30,\n width: 350,\n lineHeight: 1.2,\n paddingTop: 40,\n },\n subTitle: {\n fontSize: 13,\n marginTop: 10,\n width: 350,\n lineHeight: 1.2,\n },\n sportName: {\n fontSize: 15,\n fontWeight: 500,\n marginTop: 15,\n marginBottom: 150,\n },\n bottom: {\n width: \"100vw\",\n height: 150,\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-evenly\",\n alignItems: \"flex-end\",\n position: \"absolute\",\n bottom: 0,\n },\n bar: {\n width: 7,\n borderRadius: 2.5,\n },\n sub1: {\n fontSize: 18,\n fontWeight: 500,\n marginTop: 15,\n marginBottom: 170,\n },\n img: {\n width: 150,\n marginLeft: -10,\n marginBottom: 55,\n },\n });\n\n const bars = [\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,\n 22, 23, 24, 25, 26, 27, 28,\n ];\n const colors = [\"#E6B53C\", \"#B37814\", \"#B7BBC4\"];\n\n const getReportDetails = (reportData, orgName) => {\n const detailsObj = [];\n\n // Organization Name Details Stat\n if (orgName) {\n detailsObj.push(\n \n \n \n {getTranslatedText(\"organizationName\", lang, translations)}:{\" \"}\n \n \n {orgName} {orgSuffix}\n \n \n \n );\n }\n\n // Report Type Details Stat\n detailsObj.push(\n \n \n \n {getTranslatedText(\"reportType\", lang, translations)}:{\" \"}\n \n {/* Get value from prop when more audits are added. */}\n \n {reportData?.type_of ||\n getTranslatedText(\"cultureAudit\", lang, translations)}\n \n \n \n );\n\n // Responses Details Stat\n if (reportData?.responses) {\n detailsObj.push(\n \n \n \n {getTranslatedText(\"numRespondants\", lang, translations)}:{\" \"}\n \n {props.totalResponses} \n \n \n );\n }\n\n // Date Details Stat\n if (reportData?.date) {\n detailsObj.push(\n \n \n \n {getTranslatedText(\"surveyClose\", lang, translations)}:{\" \"}\n \n {formatReportDate(reportData.date)} \n \n \n );\n }\n\n return detailsObj;\n };\n\n const formatReportDate = (dateTime) => {\n return format(dateTime, \"MMMM do, yyyy\");\n };\n\n const introImg = (imgSrc, header, subtitle) => {\n return (\n \n \n \n {header && (\n \n \n {props?.coverTitle ||\n getTranslatedText(\"introHeader\", lang, translations)}\n \n {subtitle} \n \n )}\n \n {(templateType === 1 && (\n \n \n \n \n {getReportDetails(props.selectedReport, props.selectedOrg)}\n \n \n )) || (\n // Placeholder for stats container.\n \n {getReportDetails(props.selectedReport, props.selectedOrg)}\n \n )}\n \n \n );\n };\n\n const introReport =\n templateType === 2 ? (\n \n {introImg(imgCover, coverTitle, subtitle)}\n \n ) : (\n \n \n \n {props?.coverTitle ||\n getTranslatedText(\"introHeader\", lang, translations)}\n \n \n {getTranslatedText(\"overviewKeyFindings\", lang, translations)}\n \n {props.sportName && (\n \n {(props.selectedSport && props.sportName) || \"Culture Audit\"}\n \n )}\n \n {getTranslatedText(\"sentMsg\", lang, translations)} {formatDate(surveyDate)}\n \n\n \n {getTranslatedText(\"responseRate\", lang, translations)} {completionRate.totalResponses} / {completionRate.totalRequests}\n \n \n \n {getTranslatedText(\"generatedMsg\", lang, translations)}{\" \"}\n {(props.selectedSport && props.isOTPView && props.sportName) ||\n \"OTP\"}{\" \"}\n {getTranslatedText(\"on\", lang, translations)} \n {formatReportDate(new Date())}\n \n\n \n \n\n \n {bars.map((item) => (\n \n \n );\n\n return (\n \n {introReport} \n \n );\n};\n\nIntro.propTypes = {\n companyLogo: PropTypes.string,\n introTemplate: PropTypes.number,\n coverImage: PropTypes.string,\n coverHeading: PropTypes.string,\n coverSubtitle: PropTypes.string,\n metadata: PropTypes.object,\n};\n\nexport default Intro;\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n marginTop: 20,\n },\n TH: {\n fontSize: 10,\n textTransform: \"uppercase\",\n color: \"white\",\n fontWeight: \"bold\",\n paddingVertical: 3,\n borderTop: \"2px solid black\",\n borderBottom: \"2px solid black\",\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n borderBottom: \"1px solid black\",\n },\n H1: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n marginBottom: 30,\n },\n text: {\n lineHeight: 1.4,\n },\n});\n\nconst Table = ({\n data,\n headerColor,\n wrapRow = true,\n hideReverseText = true,\n pillarColors,\n isFrench,\n}) => {\n const lang = isFrench ? \"fr\" : \"en\";\n\n const getRowValue = (row) => {\n if (Number(row) === -1) {\n return \"--\";\n } else {\n return row;\n }\n };\n\n return (\n \n \n \n {data.rows.map((item, i) => (\n \n {item.title} \n \n ))}\n \n \n {data.data.map((item, x) => {\n return (\n \n {item.map((row, i) => (\n \n 0\n ? { color: pillarColors[x] }\n : \"\",\n styles.text,\n ]}\n >\n {getRowValue(row)}\n \n \n ))}\n \n );\n })}\n \n \n {!hideReverseText && (\n \n {getTranslatedText(\"reverseTextMsg\", lang, translations)}\n \n )}\n \n );\n};\n\nexport default Table;\n","import React from \"react\";\nimport { View, StyleSheet, Svg, Polygon } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n pages: {\n position: \"absolute\",\n left: 0,\n top: 0,\n height: \"100vh\",\n width: 20,\n zIndex: 1,\n },\n shape1: {\n height: 100,\n width: 20,\n backgroundColor: \"#3B86EE\",\n },\n});\n\nconst Side = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default Side;\n","import React from \"react\";\nimport { View, Text, Image, StyleSheet, Page } from \"@react-pdf/renderer\";\n\n// Create styles\nconst styles = StyleSheet.create({\n footer: {\n position: \"absolute\",\n bottom: 0,\n width: \"100vw\",\n padding: 20,\n paddingHorizontal: 40,\n fontSize: 8,\n zIndex: -1,\n },\n line: {\n height: 0.2,\n width: \"100%\",\n backgroundColor: \"grey\",\n marginBottom: 10,\n },\n});\n\nconst Footer = ({ isFrench }) => {\n return (\n \n \n \n Culture Audit & Assessment Tool \n Powered by innerlogic \n \n \n `Page ${pageNumber} ${isFrench ? \"de\" : \"of\"} ${totalPages}`\n }\n />\n \n \n );\n};\n\nexport default Footer;\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Table from \"./Table\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst factorTitle = [\n {\n id: 1,\n abbv: \"Mental\",\n fr_abbr: \"Mentale\",\n color: \"#8EC7D2\",\n },\n {\n id: 2,\n abbv: \"Physical\",\n fr_abbr: 'Physique',\n color: \"#DBA507\",\n },\n {\n id: 3,\n abbv: \"Psychological Safety\",\n fr_abbr: 'Sécurité psychologique',\n color: \"#33691e\",\n },\n {\n id: 4,\n abbv: \"Safe Sport\",\n fr_abbr: 'Sport sûr',\n color: \"#8c1c03\",\n },\n {\n id: 5,\n abbv: \"Self-Determination\",\n fr_abbr: 'Décision auto',\n color: \"#ba34eb\",\n },\n];\n\nconst getHeaderLetter = (name) => {\n switch (name) {\n case \"Athlete\":\n return \"A\";\n case \"Coach\":\n return \"C\";\n case \"Entraîneur(euse)\":\n return \"E\";\n case \"Sport Science\":\n return \"SSM\";\n case \"Support Staff\":\n return \"NSO\";\n case \"Sport Science/Medicine\":\n return \"SSM\";\n case \"NSO Staff\":\n return \"NSO\";\n case \"Personnel de l'ONS\":\n return \"ONS\";\n case \"Science du sport/Médecine\":\n return \"SSM\";\n default:\n return name.charAt(0);\n }\n};\n\nconst Risks = ({\n data,\n question,\n categories,\n anchor,\n titleColor,\n tableBorderColor,\n comments,\n isFrench,\n}) => {\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorName = categories.categories?.find(\n (ao) => ao.priority === \"secondary\"\n );\n let colWidth;\n\n const tableTemplateHigh = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n\n tableTemplateHigh.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"highestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const tableTemplateLow = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n tableTemplateLow.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"lowestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const fetchFactor = (q) => {\n const title = factorTitle.find((fa) => {\n return fa.id === Number(q.section) + 1;\n });\n return title;\n };\n\n const chartColors = [];\n const dimensionOne = [];\n const dimensionTwo = [];\n data.forEach((response) => {\n if (response.dimension === 0) {\n dimensionOne.push(response);\n } else {\n dimensionTwo.push(response);\n }\n });\n\n const dimensionOneQuestions = [];\n const dimOneTally = [];\n dimensionOne.forEach((q) => {\n if (\n !dimOneTally.find(\n (qk) => qk.question === q.question && qk.section === q.section\n )\n ) {\n const label = fetchFactor(q);\n dimOneTally.push(q);\n dimensionOneQuestions.push({\n question: q.question,\n dimension: q.dimension,\n section: q.section,\n factorLabel: isFrench ? label?.fr_abbr : label?.abbv,\n factorColor: label?.color,\n });\n }\n });\n\n const fetchQuestion = (q) => {\n const ques = isFrench\n ? question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.fr\n : question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.q;\n return ques;\n };\n\n const fetchReverseOption = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.reverse;\n };\n\n const isQuestionBinary = (q, question) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.binary;\n };\n\n const dimensionOneAverages = dimensionOneQuestions\n .map((q) => {\n let reverse = false;\n const questionResponses = data\n .filter(\n (r, i) =>\n r.question === q.question &&\n r.dimension === q.dimension &&\n r.section === q.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r)) {\n reverse = true;\n }\n });\n\n let n = 0;\n const questionAverage =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: q,\n average: questionAverage,\n groups: questionResponses,\n reverse: reverse,\n factorLabel: fetchFactor(q),\n };\n })\n .sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (a.reverse) {\n aAverage = 100 - aAverage;\n }\n\n if (b.reverse) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const dOneData = dimensionOneAverages\n .filter((item) => item?.groups?.length > 0)\n .filter((item) => {\n let n = 0;\n const avg =\n (item.groups.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) /\n n) *\n 10 || 0;\n const average = item.reverse ? 100 - (avg * 10) / 10 : avg / 10;\n return average < 10; // Should be whitelabel config value.\n })\n .map((item) => {\n let n = 0;\n const avg =\n item.groups.reduce((total, b) => {\n n += b.n;\n\n return total + b.average * b.n;\n }, 0) / n || 0;\n const average = (avg * 10) / 10;\n const averagePrefix = item.reverse ? \"**\" : \"\";\n chartColors.push(item.question.factorColor);\n\n const tableData = tableTemplateLow.map((v) => {\n if (v.title === getTranslatedText(\"dimensions\", lang, translations)) {\n return `${item.question.factorLabel}`;\n }\n if (v.title === \"AV\") {\n return `${average.toFixed(1)}${averagePrefix}`;\n }\n\n if (!v.id) {\n return `${fetchQuestion(item.groups[0])}`;\n }\n\n const groupData = item.groups.filter((g) => g.role === v.id);\n\n const itemAverage =\n (groupData?.length > 0 &&\n groupData.reduce((total, b) => {\n return total + b.average;\n }, 0)) ||\n null;\n\n const group =\n (groupData.length > 0 &&\n (!isNaN(itemAverage) && itemAverage / groupData.length) * 10) ||\n null;\n\n if (groupData?.length === 0) {\n return -1;\n }\n const groupAverage = group / 10;\n return `${groupAverage.toFixed(1)}`;\n });\n\n return tableData;\n });\n\n const chartOneColors = chartColors.splice(0, 5);\n const dimensionOneStrengths = dOneData.slice(0, 5);\n const chartTwoColors = chartColors.reverse().slice(0, 5);\n const dimensionOneRisks = dOneData.reverse().slice(0, 5);\n\n const dOneRiskTableData = {\n rows: tableTemplateLow,\n data: dimensionOneRisks,\n };\n\n const dOneStrengthTableData = {\n rows: tableTemplateHigh,\n data: dimensionOneStrengths,\n };\n\n return (\n <>\n \n {/* Person Dimension Ranking \n \n The tables below display the ten lowest (areas of growth) at a\n threshold of 75% and lower, and ten highest (strengths) at a threshold\n of 85% or higher, scoring questions from the assessment, as well as\n the factor each question belongs to.\n */}\n \n \n {getTranslatedText(\"personDomainRanking\", lang, translations)}\n \n \n {(dOneStrengthTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noGrowth\", lang, translations)}\n \n )}\n {comments && (\n \n {comments?.[6]} \n \n )}\n \n \n {(dOneRiskTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noGrowth\", lang, translations)}\n \n )}\n {comments && (\n \n {comments?.[7]} \n \n )}\n \n \n \n \n );\n};\n\nexport default Risks;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Table from \"./Table\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getGrade } from \"../../utils/cultureUtils\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst factorTitle = [\n {\n id: 1,\n abbv: \"Leadership\",\n fr_abbv: \"Leadership\", \n color: \"#002253\",\n },\n {\n id: 2,\n abbv: \"Coaching\",\n fr_abbv: \"Encadrement\",\n color: \"#ff5722\",\n },\n {\n id: 3,\n abbv: \"DTE\",\n fr_abbv: \"DTE\",\n color: \"#4D2C29\",\n },\n {\n id: 4,\n abbv: \"SSSM\",\n fr_abbv: \"SSSM\",\n color: \"#00a388\",\n },\n {\n id: 5,\n abbv: \"Pathways\",\n fr_abbv: \"Parcours\",\n color: \"#374140\",\n },\n {\n id: 6,\n abbv: \"Results\",\n fr_abbv: \"Résultats\",\n color: \"#f2b705\",\n },\n];\n\nconst getHeaderLetter = (name) => {\n switch (name) {\n case \"Athlete\":\n return \"A\";\n case \"Coach\":\n return \"C\";\n case \"Entraîneur(euse)\":\n return \"E\";\n case \"Sport Science\":\n return \"SSM\";\n case \"Support Staff\":\n return \"NSO\";\n case \"Sport Science/Medicine\":\n return \"SSM\";\n case \"NSO Staff\":\n return \"NSO\";\n case \"Personnel de l'ONS\":\n return \"ONS\";\n case \"Science du sport/Médecine\":\n return \"SSM\";\n default:\n return name.charAt(0);\n }\n};\n\nconst Risks = ({\n data,\n question,\n categories,\n anchor,\n titleColor,\n tableBorderColor,\n comments,\n isFrench,\n}) => {\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorName = categories.categories?.find(\n (ao) => ao.priority === \"secondary\"\n );\n let colWidth;\n\n const tableTemplateHigh = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n tableTemplateHigh.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"highestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const tableTemplateLow = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n tableTemplateLow.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"lowestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const fetchFactor = (q) => {\n const title = factorTitle.find((fa) => {\n return fa.id === Number(q.section) + 1;\n });\n return title;\n };\n\n const chartColors = [];\n const dimensionOne = [];\n const dimensionTwo = [];\n data.forEach((response) => {\n if (response.dimension === 0) {\n dimensionOne.push(response);\n } else {\n dimensionTwo.push(response);\n }\n });\n\n const dimensionTwoQuestions = [];\n const dimTwoTally = [];\n\n dimensionTwo.forEach((q) => {\n if (\n !dimTwoTally.find(\n (qk) => qk.question === q.question && qk.section === q.section\n )\n ) {\n const label = fetchFactor(q);\n dimTwoTally.push(q);\n dimensionTwoQuestions.push({\n question: q.question,\n dimension: q.dimension,\n section: q.section,\n factorLabel: isFrench ? label?.fr_abbv : label?.abbv,\n factorColor: label?.color,\n });\n }\n });\n\n const fetchQuestion = (q) => {\n const ques = isFrench\n ? question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.fr\n : question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.q;\n return ques;\n };\n\n const fetchReverseOption = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.reverse;\n };\n\n const isQuestionBinary = (q, question) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.binary;\n };\n\n const dimensionTwoAverages = dimensionTwoQuestions\n .map((q) => {\n let reverse = false;\n const questionResponses = data\n .filter(\n (r, i) =>\n r.question === q.question &&\n r.dimension === q.dimension &&\n r.section === q.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r)) {\n reverse = true;\n }\n });\n\n let n = 0;\n const questionAverage =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: q,\n average: questionAverage,\n groups: questionResponses,\n reverse: reverse,\n factorLabel: fetchFactor(q),\n };\n })\n .sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (a.reverse) {\n aAverage = 100 - aAverage;\n }\n\n if (b.reverse) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const dTwoData = dimensionTwoAverages\n .filter((item) => item?.groups?.length > 0)\n .filter((item) => {\n let n = 0;\n const avg =\n (item.groups.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) /\n n) *\n 10 || 0;\n const average = item.reverse ? 100 - (avg * 10) / 10 : avg / 10;\n return average < 10; // Should be whitelabel config value.\n })\n .map((item) => {\n let n = 0;\n const avg =\n item.groups.reduce((total, b) => {\n n += b.n;\n\n return total + b.average * b.n;\n }, 0) / n || 0;\n const average = (avg * 10) / 10;\n const averagePrefix = item.reverse ? \"**\" : \"\";\n chartColors.push(item.question.factorColor);\n\n const tableData = tableTemplateLow.map((v) => {\n if (v.title === getTranslatedText(\"dimensions\", lang, translations)) {\n return `${item.question.factorLabel}`;\n }\n if (v.title === \"AV\") {\n return `${average.toFixed(1)}${averagePrefix}`;\n }\n if (!v.id) {\n return `${fetchQuestion(item.groups[0])}`;\n }\n const groupData = item.groups.filter((g) => g.role === v.id);\n\n const itemAverage =\n (groupData?.length > 0 &&\n groupData.reduce((total, b) => {\n return total + b.average;\n }, 0)) ||\n null;\n\n const group =\n (groupData.length > 0 &&\n (!isNaN(itemAverage) && itemAverage / groupData.length) * 10) ||\n null;\n\n if (groupData?.length === 0) {\n return -1;\n }\n const groupAverage = group / 10;\n return `${groupAverage.toFixed(1)}`;\n });\n\n return tableData;\n });\n\n const chartOneColors = chartColors.slice(0, 5);\n const dimensionTwoStrengths = dTwoData.slice(0, 5);\n const chartTwoColors = chartColors.reverse().slice(0, 5);\n const dimensionTwoRisks = dTwoData.reverse().slice(0, 5);\n\n const dTwoRiskTableData = {\n rows: tableTemplateLow,\n data: dimensionTwoRisks,\n };\n\n const dTwoStrengthTableData = {\n rows: tableTemplateHigh,\n data: dimensionTwoStrengths,\n };\n\n return (\n <>\n \n {/* \n Person Dimension Ranking\n\n */}\n {/* \n The tables below display the ten lowest (areas of growth) at a\n threshold of 75% and lower, and ten highest (strengths) at a threshold\n of 85% or higher, scoring questions from the assessment, as well as\n the factor each question belongs to.\n */}\n \n \n {getTranslatedText(\"performanceDomainRanking\", lang, translations)}\n \n \n {(dTwoStrengthTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noStrengths\", lang, translations)}\n \n )}\n {comments && (\n \n {comments?.[17]} \n \n )}\n \n \n {(dTwoRiskTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noGrowth\", lang, translations)}\n \n )}\n {comments && (\n \n {comments?.[18]} \n \n )}\n \n \n \n {/* \n \n \n Performance Risk Factors\n \n {(dTwoRiskTableData?.data.length > 0 && (\n No areas of growth detected \n )}\n \n */}\n \n );\n};\n\nexport default Risks;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Table from \"./Table\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getGrade } from \"../../utils/cultureUtils\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst factorTitle = [\n [\n {\n id: 1,\n abbv: \"Mental\",\n fr_abbr: \"Mentale\",\n color: \"#8EC7D2\",\n },\n {\n id: 2,\n abbv: \"Physical\",\n fr_abbr: \"Physique\",\n color: \"#DBA507\",\n },\n {\n id: 3,\n abbv: \"Psychological Safety\",\n fr_abbr: \"Sécurité psychologique\",\n color: \"#33691e\",\n },\n {\n id: 4,\n abbv: \"Safe Sport\",\n fr_abbr: \"Sport sûr\",\n color: \"#8c1c03\",\n },\n {\n id: 5,\n abbv: \"Self-Determination\",\n fr_abbr: \"Autodétermination\",\n color: \"#ba34eb\",\n },\n ],\n [\n {\n id: 1,\n abbv: \"Leadership\",\n fr_abbr: \"Leadership\",\n color: \"#002253\",\n },\n {\n id: 2,\n abbv: \"Coaching\",\n fr_abbr: \"Encadrement\",\n color: \"#ff5722\",\n },\n {\n id: 3,\n abbv: \"DTE\",\n fr_abbr: \"DTE\",\n color: \"#4D2C29\",\n },\n {\n id: 4,\n abbv: \"SSSM\",\n fr_abbr: \"SSSM\",\n color: \"#00a388\",\n },\n {\n id: 5,\n abbv: \"Pathways\",\n fr_abbr: \"Parcours\",\n color: \"#374140\",\n },\n {\n id: 6,\n abbv: \"Results\",\n fr_abbr: \"Résultats\",\n color: \"#f2b705\",\n },\n ],\n];\n\nconst getHeaderLetter = (name) => {\n switch (name) {\n case \"Athlete\":\n return \"A\";\n case \"Coach\":\n return \"C\";\n case \"Entraîneur(euse)\":\n return \"E\";\n case \"Sport Science\":\n return \"SSM\";\n case \"Support Staff\":\n return \"NSO\";\n case \"Sport Science/Medicine\":\n return \"SSM\";\n case \"NSO Staff\":\n return \"NSO\";\n case \"Personnel de l'ONS\":\n return \"ONS\";\n case \"Science du sport/Médecine\":\n return \"SSM\";\n default:\n return name.charAt(0);\n }\n};\n\nconst Risks = ({\n data,\n question,\n categories,\n anchor,\n titleColor,\n tableBorderColor,\n otpView,\n comments,\n isFrench,\n}) => {\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorName = categories.categories?.find(\n (ao) => ao.priority === \"secondary\"\n );\n let colWidth;\n\n const tableTemplateHigh = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n\n tableTemplateHigh.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateHigh.unshift({\n title: getTranslatedText(\"highestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const tableTemplateLow = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options.map((anchor) => {\n colWidth = 39 / (anchorName.options.length + 1);\n return {\n title: isFrench\n ? getHeaderLetter(anchor?.fr).toUpperCase()\n : getHeaderLetter(anchor.name).toUpperCase(),\n id: anchor.id,\n width: `${colWidth}%`,\n };\n });\n tableTemplateLow.unshift({ title: \"AV\", width: `${colWidth}%` });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"dimensions\", lang, translations),\n width: \"25%\",\n });\n tableTemplateLow.unshift({\n title: getTranslatedText(\"lowestRatedStatements\", lang, translations),\n width: \"46%\",\n });\n\n const fetchFactor = (q) => {\n const title = factorTitle[q.dimension].find((fa) => {\n return fa.id === Number(q.section) + 1;\n });\n return title;\n };\n\n const chartColors = [];\n const dimensionOne = [];\n const dimensionTwo = [];\n data.responses.forEach((response) => {\n if (response.dimension === 0) {\n dimensionOne.push(response);\n } else {\n dimensionTwo.push(response);\n }\n });\n\n const dimensionOneQuestions = [];\n const dimOneTally = [];\n const dimensionTwoQuestions = [];\n const dimTwoTally = [];\n dimensionOne.forEach((q) => {\n if (\n !dimOneTally.find(\n (qk) => qk.question === q.question && qk.section === q.section\n )\n ) {\n const label = fetchFactor(q);\n dimOneTally.push(q);\n\n dimensionOneQuestions.push({\n question: q.question,\n dimension: q.dimension,\n section: q.section,\n factorLabel: isFrench ? label?.fr_abbr : label?.abbv,\n factorColor: label?.color,\n });\n }\n });\n\n dimensionTwo.forEach((q) => {\n if (\n !dimTwoTally.find(\n (qk) => qk.question === q.question && qk.section === q.section\n )\n ) {\n const label = fetchFactor(q);\n\n dimTwoTally.push(q);\n dimensionTwoQuestions.push({\n question: q.question,\n dimension: q.dimension,\n section: q.section,\n factorLabel: isFrench ? label?.fr_abbr : label?.abbv,\n factorColor: label?.color,\n });\n }\n });\n\n const fetchQuestion = (q) => {\n const ques = isFrench\n ? question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.fr\n : question.dimensions[q.dimension].factors[Number(q.section)].questions[\n Number(q.question)\n ]?.q;\n return ques;\n };\n\n const fetchReverseOption = (q) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.reverse;\n };\n\n const isQuestionBinary = (q, question) => {\n return question.dimensions[q.dimension].factors[Number(q.section)]\n .questions[Number(q.question)]?.binary;\n };\n\n const dimensionOneAverages = dimensionOneQuestions.map((q) => {\n let reverse = false;\n const questionResponses = data.responses\n .filter(\n (r, i) =>\n r.question === q.question &&\n r.dimension === q.dimension &&\n r.section === q.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r)) {\n reverse = true;\n }\n });\n let n = 0;\n const questionAverage =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: q,\n average: questionAverage,\n groups: questionResponses,\n reverse: reverse,\n };\n });\n\n const dimensionTwoAverages = dimensionTwoQuestions.map((q) => {\n let reverse = false;\n const questionResponses = data.responses\n .filter(\n (r, i) =>\n r.question === q.question &&\n r.dimension === q.dimension &&\n r.section === q.section\n )\n .filter((dd) => !isQuestionBinary(dd, question));\n questionResponses.forEach((r) => {\n if (fetchReverseOption(r)) {\n reverse = true;\n }\n });\n\n let n = 0;\n const questionAverage =\n questionResponses.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) / n || 0;\n\n return {\n question: q,\n average: questionAverage,\n groups: questionResponses,\n reverse: reverse,\n };\n });\n\n const dimensionAverages = [\n ...dimensionOneAverages,\n ...dimensionTwoAverages,\n ].sort((a, b) => {\n let bAverage = b.average * 10;\n let aAverage = a.average * 10;\n\n if (a.reverse) {\n aAverage = 100 - aAverage;\n }\n\n if (b.reverse) {\n bAverage = 100 - bAverage;\n }\n\n return bAverage - aAverage;\n });\n\n const dOneData = dimensionAverages\n .filter((item) => {\n let n = 0;\n const avg =\n (item.groups.reduce((total, b) => {\n n += b.n;\n return total + b.average * b.n;\n }, 0) /\n n) *\n 10 || 0;\n const average = item.reverse ? 100 - (avg * 10) / 10 : avg / 10;\n return average < 10; // Should be whitelabel config value.\n })\n .map((item) => {\n let n = 0;\n const avg =\n item.groups.reduce((total, b) => {\n n += b.n;\n\n return total + b.average * b.n;\n }, 0) / n || 0;\n const average = (avg * 10) / 10;\n const averagePrefix = item.reverse ? \"**\" : \"\";\n chartColors.push(item.question.factorColor);\n const tableData = tableTemplateLow.map((v) => {\n if (v.title === getTranslatedText(\"dimensions\", lang, translations)) {\n return `${item.question.factorLabel}`;\n }\n\n if (v.title === \"AV\") {\n return `${average.toFixed(1)}${averagePrefix}`;\n }\n\n if (!v.id) {\n return `${fetchQuestion(item.question)}`;\n }\n const groupData = item.groups.filter((g) => g.role === v.id);\n\n const group =\n (groupData.reduce((total, b) => {\n return total + b.average;\n }, 0) /\n groupData.length) *\n 10 || 0;\n const groupAverage = group / 10;\n\n if (groupData?.length === 0) {\n return -1;\n }\n\n return `${groupAverage.toFixed(1)}`;\n });\n\n return tableData;\n });\n\n const topNum = otpView ? 15 : 5;\n\n const chartOneColors = chartColors.splice(0, topNum);\n const dimensionStrengths = dOneData.slice(0, topNum);\n const chartTwoColors = chartColors.reverse().slice(0, topNum);\n\n const dimensionRisks = dOneData.reverse().slice(0, topNum);\n\n const dOneRiskTableData = {\n rows: tableTemplateLow,\n data: dimensionRisks,\n };\n\n const dOneStrengthTableData = {\n rows: tableTemplateHigh,\n data: dimensionStrengths,\n };\n\n return (\n <>\n \n \n {getTranslatedText(\"summary\", lang, translations)}\n \n \n The tables below display the ten lowest (areas of growth) at a\n threshold of 75% and lower, and ten highest (strengths) at a threshold\n of 85% or higher, scoring questions from the assessment, as well as\n the factor each question belongs to.\n */}\n \n \n {getTranslatedText(\"highestRankedItems\", lang, translations)} (\n {topNum})\n \n {(dOneStrengthTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noStrengths\", lang, translations)}\n \n )}\n\n {comments && (\n \n {comments?.[21]} \n \n )}\n \n \n \n \n \n {getTranslatedText(\"lowestRankedItems\", lang, translations)} (\n {topNum})\n \n {(dOneRiskTableData?.data.length > 0 && (\n \n {getTranslatedText(\"noGrowth\", lang, translations)}\n \n )}\n\n {comments && (\n \n {comments?.[22]} \n \n )}\n \n \n \n );\n};\n\nexport default Risks;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getFeedbackOTP } from \"../../utils/cultureUtils\";\nimport Table from \"./Table\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst Comments = (props) => {\n const { structure, list, categories, filterData, isFrench } = props;\n\n const tableTemplate = [{ title: \"Feedback\", width: \"100%\" }];\n\n const getFeedbackTable = (question, index) => {\n const feedbackData = getFeedbackOTP(\n filterData,\n structure,\n categories,\n question\n );\n\n const questionText = structure.comments.find((c) => {\n return c.order === question;\n })?.question;\n\n const getSentiment = (sent) => {\n if (sent > 2) {\n return \"Positive\";\n }\n if (sent < -2) {\n return \"Negative\";\n }\n return \"Neutral\";\n };\n\n const getRisk = (risk) => {\n if (risk > 70) {\n return `High`;\n }\n if (risk > 20) {\n return `Moderate`;\n }\n return `Low`;\n };\n\n if (!feedbackData || feedbackData.length === 0) {\n return null;\n }\n\n const tableData = feedbackData\n .filter((f) => f.text !== \"\")\n .map((feedback) => {\n return [`${feedback.text}`];\n });\n\n const tableContent = {\n rows: tableTemplate,\n data: tableData,\n };\n\n return (\n \n \n {questionText} \n \n \n \n \n );\n };\n\n return (\n <>\n \n \n Qualitative Comments pertaining to Leadership and Vision\n \n {list.map((q, i) => {\n return getFeedbackTable(q, i);\n })}\n \n \n );\n};\n\nexport default Comments;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { View, Text, StyleSheet } from \"@react-pdf/renderer\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n width: \"100%\",\n marginBottom: 30,\n position: \"relative\",\n marginTop: 20,\n },\n bottom: {\n width: \"85%\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n row: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n borderBottom: \"1px solid black\",\n },\n title: {\n width: \"35%\",\n display: \"flex\",\n alignItems: \"flex-start\",\n textAlign: \"left\",\n paddingLeft: 5,\n fontSize: 10,\n borderRight: \"1px solid #000921\",\n paddingTop: 2,\n paddingBottom: 2,\n },\n averageTitle: {\n width: \"35%\",\n display: \"flex\",\n alignItems: \"flex-start\",\n textAlign: \"left\",\n paddingLeft: 5,\n fontSize: 10,\n borderRight: \"1px solid #000921\",\n paddingTop: 2,\n paddingBottom: 2,\n color: \"#031A4A\",\n },\n bar: {\n height: 8,\n opacity: 0.9,\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n paddingTop: 2,\n paddingBottom: 2,\n },\n score: {\n fontSize: 10,\n fontWeight: 700,\n marginLeft: 4,\n position: \"absolute\",\n right: -20,\n top: -2,\n opacity: 1,\n },\n lines: {\n position: \"absolute\",\n left: \"20%\",\n height: \"100%\",\n width: \"calc(80% + 20px)\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n borderBottom: \"1px solid black\",\n },\n line: {\n height: \"calc(100% + 10px)\",\n width: 1,\n borderLeft: \"0.5px dashed grey\",\n position: \"absolute\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n chart: {\n position: \"relative\",\n },\n text: {\n position: \"absolute\",\n top: -35,\n left: -25,\n fontSize: 7,\n color: \"grey\",\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"column\",\n width: 50,\n textAlign: \"center\",\n },\n norm: {\n position: \"absolute\",\n height: \"100%\",\n width: \"100%\",\n left: \"20%\",\n },\n subTitle: {\n fontWeight: \"bold\",\n color: \"#031A4A\",\n },\n top: {\n width: \"100%\",\n borderTop: \"1px solid black\",\n borderBottom: \"1px solid black\",\n backgroundColor: \"#031A4A\",\n display: \"flex\",\n flexDirection: \"row\",\n color:'white'\n },\n numbers: {\n width: \"20%\",\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n textAlign: \"center\",\n justifyContent: \"center\",\n borderRight: \"1px solid #000921\",\n fontSize: 10,\n },\n spacer: {\n width: \"54%\",\n },\n order: {\n width: \"45%\",\n display: \"flex\",\n flexDirection: \"row\",\n },\n topNum: {\n width: \"9.09%\",\n fontSize: 10,\n },\n});\n\nconst OTPChart = (props) => {\n const { data, categories, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n const getSecondaryLabel = (id) => {\n const secondaryItems = categories.categories.find(\n (c) => c.priority === \"secondary\"\n );\n const label = secondaryItems?.options?.find((o) => o.id === id);\n\n return label;\n };\n\n return (\n \n \n {data.factor} \n \n \n \n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => {\n return {item} ;\n })}\n \n \n\n \n \n \n {getTranslatedText(\"average\", lang, translations)}\n \n {data.factorAverage.toFixed(1)} \n \n \n {data.factorResponses\n ?.sort((a, b) => b.average - a.average)\n .map((item) => {\n if (!item.average) {\n return null;\n }\n\n const label = getSecondaryLabel(item.id);\n\n return (\n \n \n {isFrench ? label?.fr : label?.name}\n \n {item.average.toFixed(1)} \n \n \n );\n })}\n \n \n );\n};\n\nexport default OTPChart;\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport {\n calculate_table_data,\n getPrimaryRoleData,\n} from \"../../../../reports/Audit/data_navigation/calculate_data\";\nimport OTPChart from \"./OTPChart\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst Comparitive = (props) => {\n const {\n categories,\n structure,\n calculated,\n titleColor,\n accessSubfactor = false,\n comments,\n isFrench,\n } = props;\n\n const lang = isFrench ? \"fr\" : \"en\";\n\n const colorsArr = [\"#d9d9d9\", \"#e5b63d\", \"#b9bdc5\", \"#ac710f\", \"#cd2c38\"];\n\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n\n let tableData;\n if (accessSubfactor) {\n const getColConfig = () => {\n const primaryOptions = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n return primaryOptions.options.map((po) => {\n return {\n name: po.name,\n color: po.color,\n subfactors: po.subfactors,\n id: po.id,\n };\n });\n };\n\n const config = getColConfig();\n\n const getOTPTableData = (data) => {\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n const tableData = structure.dimensions.map((d) => {\n const dimensionResponses = data?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n let nationalAverage = {};\n let nationalN = 0;\n dimensionResponses.forEach((dr) => {\n nationalN += dr?.n || 0;\n if (dr?.role) {\n if (!nationalAverage[dr.role]?.n) {\n nationalAverage[dr.role] = {\n n: dr?.n || 0,\n sum: dr?.average ? dr?.average * dr?.n : 0,\n };\n } else {\n nationalAverage[dr.role].n += dr?.n || 0;\n nationalAverage[dr.role].sum += dr?.average\n ? dr?.average * dr?.n\n : 0;\n }\n }\n });\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n // loop through config to get categorized data\n\n const dimensionInfo = config.map((ci) => {\n const primaryLabel = ci.name;\n let primaryResponses = [];\n let sportAverage = {};\n dimensionResponses.forEach((dr) => {\n const matchingResponses = dr.primaryData.filter(\n (fpd) => ci.id === fpd.group\n );\n primaryResponses.push({\n responses: matchingResponses,\n role: dr.role,\n primary: primaryLabel,\n });\n });\n\n return {\n primary: primaryLabel,\n responses: primaryResponses,\n id: ci.id,\n };\n });\n\n let nationalSum = 0;\n let nationalNValue = 0;\n const nationalAvgRows = tableGroups.map((tg) => {\n const currentGroup = nationalAverage[tg.id];\n const roleAvg = currentGroup?.sum\n ? currentGroup.sum / currentGroup.n\n : 0;\n nationalSum += nationalAverage[tg.id]?.sum || 0;\n nationalNValue += nationalAverage[tg.id]?.n || 0;\n return {\n id: tg.id,\n average: ((roleAvg * 10) / 10).toFixed(1),\n };\n });\n\n const nationalAvg = nationalSum / nationalNValue;\n\n const nationalAverageRow = {\n factor: \"National Average\",\n factorAverage: ((nationalAvg * 10) / 10).toFixed(1),\n factorResponses: nationalAvgRows,\n rowId: 0,\n };\n\n const dimensionData = config.map((ci) => {\n // get list of all responses related to current category.\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses.map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const ciAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n const rowCols = tableGroups.map((tg) => {\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses\n .filter((dir) => dir.role === tg.id)\n .map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const roleAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n return {\n id: tg.id,\n average: ((roleAvg * 10) / 10).toFixed(1),\n };\n });\n\n return {\n factor: ci.name,\n factorAverage: ((ciAvg * 10) / 10).toFixed(1),\n factorResponses: rowCols,\n rowId: ci.id,\n };\n });\n\n dimensionData.unshift(nationalAverageRow);\n\n return {\n dimension: d.title,\n dimensionId: d.id,\n dimensionAvg: null,\n data: dimensionData,\n };\n });\n\n return tableData;\n };\n\n tableData = getOTPTableData(calculated.responses);\n } else {\n tableData = structure.dimensions.map((d) => {\n const dimensionResponses = calculated?.summary?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const dimensionResponsesForOverall = calculated?.raw?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: isFrench\n ? ao?.fr.charAt(0).toUpperCase()\n : ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n\n const dimensionData = d.factors.map((f) => {\n const factorResponses = dimensionResponses.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n const factorResponsesForOverall = dimensionResponsesForOverall.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n let n = 0;\n const factorAvg =\n factorResponsesForOverall.reduce((total, b) => {\n n += b.raw?.length;\n\n return total + b.raw?.reduce((acc, curr) => acc + curr, 0);\n }, 0) / n || null;\n\n const factorColumns = tableGroups.map((g) => {\n return {\n average: factorResponses.find((fr) => fr.secondary === g.id)\n ?.average,\n id: g.id,\n };\n });\n\n return {\n factor: isFrench ? f?.fr : f.title,\n factorAverage: factorAvg,\n factorResponses: factorColumns,\n };\n });\n\n let n = 0;\n let overallDimAverage = 0;\n\n dimensionData.forEach((dd) => {\n if (dd.factorAverage) {\n n++;\n overallDimAverage += dd.factorAverage;\n }\n });\n\n if (n > 0 && overallDimAverage > 0) {\n overallDimAverage = overallDimAverage / n;\n }\n\n return {\n dimension: isFrench ? d?.fr : d.title,\n dimensionId: d.id,\n dimensionAvg: overallDimAverage.toFixed(1),\n data: dimensionData,\n };\n // }\n });\n }\n\n const createTables = (\n dimension,\n headerColor,\n wrapRow = true,\n hideReverseText = true\n ) => {\n return (\n \n \n \n \n \n \n {dimension.title}{\" \"}\n {getTranslatedText(\"domainOverallScore\", lang, translations)}\n \n \n \n {dimension.dimensionAvg} \n \n \n \n {getTranslatedText(\"by\", lang, translations)}{\" \"}\n {isFrench ? anchorTwo?.fr_name : anchorTwo.name}\n \n \n \n \n \n \n \n {getTranslatedText(\"avg\", lang, translations)} \n \n \n {getTranslatedText(\"Athlete\", lang, translations)} \n \n \n {getTranslatedText(\"Coach\", lang, translations)} \n \n \n SSSM \n \n \n {getTranslatedText(\"NSOStaff\", lang, translations)} \n \n \n {dimension.data\n ?.sort((a, b) => b.factorAverage - a.factorAverage)\n .map((row) => {\n return (\n \n \n {row.factor} \n \n \n {row.factorAverage.toFixed(1)} \n \n {row.factorResponses?.map((col, i) => {\n return (\n \n \n {(!isNaN((col.average * 10) / 10) &&\n ((col.average * 10) / 10)?.toFixed(1)) ||\n \"--\"}\n \n \n );\n })}\n \n );\n })}\n \n \n {!hideReverseText && (\n \n {getTranslatedText(\"reverseTextMsg\", lang, translations)}\n \n )}\n \n );\n };\n\n return (\n <>\n \n \n {getTranslatedText(\"personDomain\", lang, translations)}\n \n \n {createTables(tableData[0], \"blue\")}\n {comments && (\n \n {comments?.[0]} \n \n )}\n \n )}\n {tableData.length > 0 &&\n tableData?.[0].data.map((d, i) => {\n return (\n \n \n {comments?.[i + 1]} \n \n )}\n \n );\n })}\n \n \n );\n};\n\nexport default Comparitive;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 14,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n },\n TD2: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n },\n TH: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 9,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 18,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 9,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 10,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport {\n calculate_table_data,\n getPrimaryRoleData,\n} from \"../../../../reports/Audit/data_navigation/calculate_data\";\nimport OTPChart from \"./OTPChart\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst Comparitive = (props) => {\n const {\n categories,\n structure,\n config,\n accessSubfactor = false,\n calculated,\n comments,\n isFrench,\n } = props;\n\n const lang = isFrench ? \"fr\" : \"en\";\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n const colorsArr = [\"#d9d9d9\", \"#e5b63d\", \"#b9bdc5\", \"#ac710f\", \"#cd2c38\"];\n\n let tableData;\n if (accessSubfactor) {\n const getColConfig = () => {\n const primaryOptions = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n return primaryOptions.options.map((po) => {\n return {\n name: po.name,\n color: po.color,\n subfactors: po.subfactors,\n id: po.id,\n };\n });\n };\n\n const config = getColConfig();\n\n const getOTPTableData = (data) => {\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n const tableData = structure.dimensions.map((d) => {\n const dimensionResponses = data?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n let nationalAverage = {};\n let nationalN = 0;\n dimensionResponses.forEach((dr) => {\n nationalN += dr?.n || 0;\n if (dr?.role) {\n if (!nationalAverage[dr.role]?.n) {\n nationalAverage[dr.role] = {\n n: dr?.n || 0,\n sum: dr?.average ? dr?.average * dr?.n : 0,\n };\n } else {\n nationalAverage[dr.role].n += dr?.n || 0;\n nationalAverage[dr.role].sum += dr?.average\n ? dr?.average * dr?.n\n : 0;\n }\n }\n });\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n // loop through config to get categorized data\n\n const dimensionInfo = config.map((ci) => {\n const primaryLabel = ci.name;\n let primaryResponses = [];\n let sportAverage = {};\n dimensionResponses.forEach((dr) => {\n const matchingResponses = dr.primaryData.filter(\n (fpd) => ci.id === fpd.group\n );\n primaryResponses.push({\n responses: matchingResponses,\n role: dr.role,\n primary: primaryLabel,\n });\n });\n\n return {\n primary: primaryLabel,\n responses: primaryResponses,\n id: ci.id,\n };\n });\n\n let nationalSum = 0;\n let nationalNValue = 0;\n const nationalAvgRows = tableGroups.map((tg) => {\n const currentGroup = nationalAverage[tg.id];\n const roleAvg = currentGroup?.sum\n ? currentGroup.sum / currentGroup.n\n : 0;\n nationalSum += nationalAverage[tg.id]?.sum || 0;\n nationalNValue += nationalAverage[tg.id]?.n || 0;\n return {\n id: tg.id,\n average: ((roleAvg * 10) / 10).toFixed(1),\n };\n });\n\n const nationalAvg = nationalSum / nationalNValue;\n\n const nationalAverageRow = {\n factor: \"National Average\",\n factorAverage: ((nationalAvg * 10) / 10).toFixed(1),\n factorResponses: nationalAvgRows,\n rowId: 0,\n };\n\n const dimensionData = config.map((ci) => {\n // get list of all responses related to current category.\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses.map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const ciAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n const rowCols = tableGroups.map((tg) => {\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses\n .filter((dir) => dir.role === tg.id)\n .map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const roleAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n return {\n id: tg.id,\n average: (roleAvg * 10) / 10,\n };\n });\n\n return {\n factor: ci.name,\n factorAverage: ((ciAvg * 10) / 10).toFixed(1),\n factorResponses: rowCols,\n rowId: ci.id,\n };\n });\n\n dimensionData.unshift(nationalAverageRow);\n\n return {\n dimension: d.title,\n dimensionId: d.id,\n dimensionAvg: null,\n data: dimensionData,\n };\n });\n\n return tableData;\n };\n\n tableData = getOTPTableData(calculated.responses);\n } else {\n tableData = structure.dimensions.map((d) => {\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n\n const dimensionResponses = calculated?.summary?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const dimensionResponsesForOverall = calculated?.raw?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: isFrench\n ? ao?.fr.charAt(0).toUpperCase()\n : ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n\n const dimensionData = d.factors.map((f) => {\n const factorResponses = dimensionResponses.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n const factorResponsesForOverall = dimensionResponsesForOverall.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n let n = 0;\n const factorAvg =\n factorResponsesForOverall.reduce((total, b) => {\n n += b.raw?.length;\n\n return total + b.raw?.reduce((acc, curr) => acc + curr, 0);\n }, 0) / n || null;\n\n const factorColumns = tableGroups.map((g) => {\n return {\n average: factorResponses.find((fr) => fr.secondary === g.id)?.average,\n id: g.id,\n };\n });\n\n return {\n factor: isFrench ? f?.fr : f.title,\n factorAverage: factorAvg,\n factorResponses: factorColumns,\n };\n });\n\n let n = 0;\n let overallDimAverage = 0;\n\n dimensionData.forEach((dd) => {\n if (dd.factorAverage) {\n n++;\n overallDimAverage += dd.factorAverage;\n }\n });\n\n if (n > 0 && overallDimAverage > 0) {\n overallDimAverage = overallDimAverage / n;\n }\n\n return {\n dimension: isFrench ? d?.fr : d.title,\n dimensionId: d.id,\n dimensionAvg: overallDimAverage.toFixed(1),\n data: dimensionData,\n };\n });\n }\n\n const createTables = (\n dimension,\n headerColor,\n wrapRow = true,\n hideReverseText = true\n ) => {\n return (\n \n \n \n \n \n \n {dimension.title}{\" \"}\n {getTranslatedText(\"domainOverallScore\", lang, translations)}\n \n \n \n {dimension.dimensionAvg} \n \n \n \n {getTranslatedText(\"by\", lang, translations)}{\" \"}\n {isFrench ? anchorTwo?.fr_name : anchorTwo.name}\n \n \n \n \n \n \n \n {getTranslatedText(\"avg\", lang, translations)} \n \n \n {getTranslatedText(\"Athlete\", lang, translations)} \n \n \n {getTranslatedText(\"Coach\", lang, translations)} \n \n \n SSSM \n \n \n {getTranslatedText(\"NSOStaff\", lang, translations)} \n \n \n\n {dimension.data\n ?.sort((a, b) => b.factorAverage - a.factorAverage)\n .map((row) => {\n return (\n \n \n {row.factor} \n \n \n {row.factorAverage.toFixed(1)} \n \n {row.factorResponses?.map((col, i) => {\n return (\n \n \n {(!isNaN((col.average * 10) / 10) &&\n ((col.average * 10) / 10)?.toFixed(1)) ||\n \"--\"}\n \n \n );\n })}\n \n );\n })}\n \n \n {!hideReverseText && (\n \n {getTranslatedText(\"reverseTextMsg\", lang, translations)}\n \n )}\n \n );\n };\n\n return (\n <>\n \n \n {getTranslatedText(\"performanceDomain\", lang, translations)}\n \n \n {createTables(tableData[1], \"blue\")}\n {comments && (\n \n {comments?.[10]} \n \n )}\n \n )}\n {tableData.length > 0 &&\n tableData?.[1].data.map((d, i) => {\n return (\n \n \n {comments?.[i + 11]} \n \n )}\n \n );\n })}\n \n \n );\n};\n\nexport default Comparitive;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 14,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n },\n TD2: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n },\n TH: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 9,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 18,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 9,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 10,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { View, Text, StyleSheet, Page, Image } from \"@react-pdf/renderer\";\nimport Footer from \"./Footer\";\nimport Side from \"./Side\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n padding: 60,\n paddingHorizontal: 10,\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n p: {\n fontSize: 10,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n chartWrapper: {\n paddingTop: 20,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n summary: {\n border: \"2px solid #000921\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#000921\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n});\n\nconst CultureMap = (props) => {\n const { chart, config, titleColor, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n return (\n \n \n \n {getTranslatedText(\"cultureMap\", lang, translations)}\n \n \n {getTranslatedText(\"cultureMapDesc\", lang, translations)}\n \n \n\n \n \n \n );\n};\n\nexport default CultureMap;\n","import React from \"react\";\nimport { View, Text, StyleSheet, Font, Page } from \"@react-pdf/renderer\";\nimport PropTypes from \"prop-types\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\n/**\n *\n * @param {description: string, factors: string} props\n *\n * @returns\n */\nconst Methodology = (props) => {\n const { nav, categories, rule, structure, data, anchor, titleColor, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n // Create styles\n const styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n page: {\n width: \"100%\",\n height: \"100vh\",\n position: \"relative\",\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n p2: {\n fontSize: 9,\n marginBottom: 10,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n fontWeight: 700,\n fontSize: 14,\n marginTop: 15,\n },\n section: {\n paddingTop: 10,\n paddingBottom: 10,\n paddingLeft: 20,\n paddingRight: 20,\n backgroundColor: \"#F1F1F7\",\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n width: \"100%\",\n marginTop: 20,\n marginBottom: 20,\n },\n subSection: {\n display: \"flex\",\n flexDirection: \"row\",\n fontWeight: 700,\n fontSize: 16,\n height: \"100%\",\n alignItems: \"center\",\n },\n subTitle: {\n fontWeight: 700,\n fontSize: 16,\n },\n S1: {\n fontSize: 10,\n marginRight: 15,\n },\n img: {\n height: 20,\n },\n offset: {\n width: \"100%\",\n },\n summary: {\n border: \"2px solid #000921\",\n borderRadius: 5,\n marginTop: 20,\n marginBottom: 20,\n },\n top: {\n backgroundColor: \"#000921\",\n color: \"white\",\n fontSize: 16,\n fontWeight: 700,\n padding: 5,\n },\n bottom: {\n padding: 10,\n marginTop: 20,\n },\n steps: {\n width: \"90%\",\n display: \"flex\",\n flexDirection: \"row\",\n marginBottom: 3,\n },\n steps2: {\n width: \"90%\",\n display: \"flex\",\n flexDirection: \"column\",\n },\n square: {\n height: 6,\n width: 6,\n backgroundColor: \"#000921\",\n marginLeft: 20,\n marginRight: 10,\n marginTop: 5,\n },\n wrappingTitle: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n color: \"#2E34D0\",\n marginBottom: 15,\n },\n quote: {\n fontSize: 13,\n lineHeight: 1.7,\n textAlign: \"center\",\n alignItems: \"flex-end\",\n },\n author: {\n paddingTop: 10,\n width: \"100%\",\n fontSize: 10,\n lineHeight: 1.2,\n justifyContent: \"flex-start\",\n },\n quoteText: {\n fontWeight: 500,\n },\n quoteSection: {\n paddingTop: 35,\n paddingBottom: 15,\n paddingLeft: 15,\n paddingRight: 15,\n backgroundColor: \"#F1F1F7\",\n display: \"flex\",\n flexDirection: \"column\",\n marginTop: 25,\n marginBottom: 20,\n marginLeft: 5,\n width: \"45%\",\n },\n definition: {\n display: \"flex\",\n flexDirection: \"row\",\n fontSize: 11,\n marginBottom: 8,\n },\n definition2: {\n display: \"flex\",\n flexDirection: \"column\",\n fontSize: 11,\n marginBottom: 8,\n lineHeight: 1.7,\n },\n d1: {\n fontWeight: 700,\n color: \"#44546A\",\n },\n italic: {\n fontWeight: 500,\n },\n numbered: { fontWeight: 500, marginRight: 10, fontSize: 9 },\n });\n\n let subSelected = false;\n const navItems = Object.keys(nav);\n const navOptions = [];\n navItems.forEach((item) => {\n let found = false;\n const anchorName = categories.categories.find((f) => f.id === anchor);\n if (nav[item].selected === false) {\n subSelected = true;\n found = true;\n }\n\n if (found) {\n let subNavItems = Object.keys(nav[item]);\n subNavItems = subNavItems.filter(\n (key) => key !== \"priority\" && key !== \"selected\"\n );\n let selected = subNavItems.filter((subNav) => nav[item]?.[subNav].sub);\n if (selected.length > 0) {\n selected.forEach((selectedNav) => {\n let subFactorsKeys = Object.keys(nav[item]?.[selectedNav].subfactors);\n subFactorsKeys.forEach((subKey) => {\n if (nav[item]?.[selectedNav].subfactors?.[subKey].selected) {\n navOptions.push(nav[item]?.[selectedNav].subfactors?.[subKey].id);\n }\n });\n });\n }\n }\n });\n\n const anchorGroup = categories.categories.find((cat) => cat.id === anchor);\n\n const introduction = (\n \n \n \n {getTranslatedText('methodologyHeader', lang, translations)}\n \n \n {getTranslatedText('methodologyDescription', lang, translations)}\n \n \n {/* \n \n \n “A nation's culture resides in the hearts and in the soul of its\n people.”\n \n - Mahatma Gandhi \n \n */}\n \n );\n\n const sportIndex = (\n \n \n {getTranslatedText(\"sportIndexDescription\", lang, translations)}\n \n\n \n \n \n \n {getTranslatedText(\"cultureOfCare\", lang, translations)} –{\" \"}\n \n {getTranslatedText(\"cultureOfCare\", lang, translations, true)}\n \n \n\n \n \n \n {getTranslatedText(\"cultureOfApathy\", lang, translations)} -{\" \"}\n \n {getTranslatedText(\"cultureOfApathy\", lang, translations, true)}\n \n \n\n \n \n \n {getTranslatedText(\"cultureOfHarassment\", lang, translations)} -{\" \"}\n \n {getTranslatedText(\"cultureOfHarassment\", lang, translations, true)}\n \n \n\n \n \n \n {getTranslatedText(\"cultureOfQuality\", lang, translations)} -{\" \"}\n \n {getTranslatedText(\"cultureOfQuality\", lang, translations, true)}\n \n \n\n \n \n \n {getTranslatedText(\"cultureOfExcellence\", lang, translations)} -{\" \"}\n \n {getTranslatedText(\"cultureOfExcellence\", lang, translations, true)}\n \n \n \n \n );\n\n const methodology = (\n \n \n {getTranslatedText('methodologyParagraph', lang, translations)}\n \n\n \n {getTranslatedText('personDomain', lang, translations)}: \n \n {getTranslatedText('personDomain', lang, translations, true)}\n \n \n \n {getTranslatedText('performanceDomain', lang, translations)}: \n \n {getTranslatedText('performanceDomain', lang, translations, true)}\n \n \n\n \n {getTranslatedText('caatDescription', lang, translations)}\n \n \n );\n\n const wrap = navOptions.length > 5;\n\n const nextSteps = (\n \n \n How to create change using this report\n \n \n Changing culture is a process, not an event. Therefore, this report\n alone is not a sufficient culture change strategy. The effectiveness of\n this report, like all data, ultimately rests on your willingness to\n reflect, engage, and commit to action. Here are some keys to keep in\n mind as you work to turn the data into transformation.\n \n \n 1. \n \n Establish a sense of urgency. \n Examine the findings of this report with a factual lens.\n Productive change begins when you have the discipline to confront the\n facts of your current reality, whatever they might be.\n \n \n \n 2. \n \n Set your priorities. \n As Brene Brown suggests in her book Dare to Lead, “if you\n have more than three priorities, you have no priorities”. Resist the\n urge to boil the ocean, and rather, hone in on a few key areas you\n have the capacity to impact over the coming months.\n \n \n \n 3. \n \n Form a guiding coalition. \n Assemble a diverse, representative, and influential group\n to lead the change effort. Bring this team together to drive ideation\n in an open and honest way based on the priorities from the report, and\n ensure they are empowered to act on the groups vision.\n \n \n \n 4. \n \n Create short term wins. \n Begin to implement initiatives that are visible and\n obvious based on the feedback provided in the report. These don't have\n to be monumental, but rather little changes that send a signal that\n things are in motion and the feedback provided is making a difference\n right away.\n \n \n \n 5. \n \n Strategize long term success. \n In the midst of celebrating short term culture wins,\n continue to plan bigger initiatives that will be instilled more\n gradually.\n \n \n \n );\n\n return (\n \n \n {/*Report Methods */}\n {/* \n \n );\n};\n\nFont.register({\n family: \"Barlow\",\n fonts: [{ src: Barlow }],\n});\n\nMethodology.propTypes = {\n companyLogo: PropTypes.string,\n introTemplate: PropTypes.number,\n coverImage: PropTypes.string,\n coverHeading: PropTypes.string,\n coverSubtitle: PropTypes.string,\n metadata: PropTypes.object,\n};\n\nexport default Methodology;\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport OTPChart from \"./OTPChart\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst AreasOfImprovement = (props) => {\n const {\n nav,\n categories,\n rule,\n structure,\n reportData,\n config,\n accessSubfactor,\n calculated,\n isFrench,\n } = props;\n\n const lang = isFrench ? \"fr\" : \"en\";\n\n const colorsArr = [\"#d9d9d9\", \"#e5b63d\", \"#b9bdc5\", \"#ac710f\", \"#cd2c38\"];\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n\n const tableData = structure.dimensions.map((d) => {\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n\n const dimensionResponses = calculated?.summary?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n const dimensionResponsesForOverall = calculated?.raw?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: isFrench\n ? ao?.fr.charAt(0).toUpperCase()\n : ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n\n const dimensionData = d.factors.map((f) => {\n const factorResponses = dimensionResponses.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n const factorResponsesForOverall = dimensionResponsesForOverall.filter(\n (r) => Number(r.factor) === f.id - 1\n );\n\n let n = 0;\n const factorAvg =\n factorResponsesForOverall.reduce((total, b) => {\n n += b.raw?.length;\n\n return total + b.raw?.reduce((acc, curr) => acc + curr, 0);\n }, 0) / n || null;\n\n const factorColumns = tableGroups.map((g) => {\n return {\n average: factorResponses.find((fr) => fr.secondary === g.id)?.average,\n id: g.id,\n };\n });\n\n return {\n factor: isFrench ? f?.fr : f.title,\n factorAverage: factorAvg,\n factorResponses: factorColumns,\n };\n });\n\n let n = 0;\n let overallDimAverage = 0;\n\n dimensionData.forEach((dd) => {\n if (dd.factorAverage) {\n n++;\n overallDimAverage += dd.factorAverage;\n }\n });\n\n if (n > 0 && overallDimAverage > 0) {\n overallDimAverage = overallDimAverage / n;\n }\n\n return {\n dimension: isFrench ? d?.fr : d.title,\n dimensionId: d.id,\n dimensionAvg: overallDimAverage,\n data: dimensionData,\n };\n // }\n });\n\n const getSortedTableData = (data) => {\n const compiledData = data.map((dim) => dim.data);\n const sortedDimData = compiledData.flat().sort((a, b) => {\n if (a.factorAverage > b.factorAverage) return 1;\n if (a.factorAverage < b.factorAverage) return -1;\n return 0;\n });\n return sortedDimData;\n };\n\n const createTables = (\n data,\n headerColor,\n wrapRow = true,\n hideReverseText = true\n ) => {\n const domainsText = isFrench ? `Par ${anchorTwo?.fr_name}` : `By ${anchorTwo?.name}`;\n return (\n \n \n \n \n \n {getTranslatedText(\"Domains\", lang, translations)} \n \n \n {domainsText} \n \n \n \n \n \n \n {getTranslatedText(\"avg\", lang, translations)} \n \n \n {getTranslatedText(\"Athlete\", lang, translations)} \n \n \n {getTranslatedText(\"Coach\", lang, translations)} \n \n \n SSSM \n \n \n {getTranslatedText(\"NSOStaff\", lang, translations)} \n \n \n {data.map((row) => {\n return (\n \n \n {row.factor} \n \n \n {row.factorAverage?.toFixed(1)} \n \n {row.factorResponses.map((col, i) => {\n return (\n \n {col.average?.toFixed(1) || \"--\"} \n \n );\n })}\n \n );\n })}\n \n \n {!hideReverseText && (\n \n {getTranslatedText(\"reverseTextMsg\", lang, translations)}\n \n )}\n \n );\n };\n\n return (\n <>\n \n \n {getTranslatedText(\"summary\", lang, translations)}\n \n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n */}\n\n {tableData.length > 0 && (\n {createTables(getSortedTableData(tableData), \"blue\")} \n )}\n {/* {tableData.length > 0 &&\n getSortedTableData(tableData)?.map((da) => {\n return (\n \n \n );\n })} */}\n \n \n );\n};\n\nexport default AreasOfImprovement;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 14,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 9,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 9,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 10,\n fontWeight: 200,\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n TD2: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n },\n TH: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n T2: {\n fontSize: 18,\n fontWeight: 700,\n color: \"#000921\",\n },\n TD: {\n fontSize: 8,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport {\n calculate_table_data,\n getPrimaryRoleData,\n} from \"../../../../reports/Audit/data_navigation/calculate_data\";\nimport OTPChart from \"./OTPChart\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst OTPDimensions = (props) => {\n const { categories, structure, calculated, titleColor, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"secondary\"\n );\n\n let tableData;\n\n const getColConfig = () => {\n const primaryOptions = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n return primaryOptions.options.map((po) => {\n return {\n name: po.name,\n color: po.color,\n subfactors: po.subfactors,\n id: po.id,\n };\n });\n };\n\n const config = getColConfig();\n\n const getOTPTableData = (data) => {\n const anchorTwo = categories.categories.find(\n (f) => f.priority === \"primary\"\n );\n const tableData = structure.dimensions.map((d) => {\n const dimensionResponses = data?.filter(\n (r) => Number(r.dimension) === d.id - 1\n );\n\n let nationalAverage = {};\n let nationalN = 0;\n dimensionResponses.forEach((dr) => {\n nationalN += dr?.n || 0;\n if (dr?.role) {\n if (!nationalAverage[dr.role]?.n) {\n nationalAverage[dr.role] = {\n n: dr?.n || 0,\n sum: dr?.average ? dr?.average * dr?.n : 0,\n };\n } else {\n nationalAverage[dr.role].n += dr?.n || 0;\n nationalAverage[dr.role].sum += dr?.average\n ? dr?.average * dr?.n\n : 0;\n }\n }\n });\n\n const tableGroups = categories.categories\n ?.find((ao) => ao.priority === \"secondary\")\n .options?.map((ao) => {\n return {\n title: isFrench ? ao?.fr.charAt(0).toUpperCase() : ao.name.charAt(0).toUpperCase(),\n id: ao.id,\n };\n });\n // loop through config to get categorized data\n\n const dimensionInfo = config.map((ci) => {\n const primaryLabel = ci.name;\n let primaryResponses = [];\n let sportAverage = {};\n dimensionResponses.forEach((dr) => {\n const matchingResponses = dr.primaryData.filter(\n (fpd) => ci.id === fpd.group\n );\n primaryResponses.push({\n responses: matchingResponses,\n role: dr.role,\n primary: primaryLabel,\n });\n });\n\n return {\n primary: primaryLabel,\n responses: primaryResponses,\n id: ci.id,\n };\n });\n\n let nationalSum = 0;\n let nationalNValue = 0;\n const nationalAvgRows = tableGroups.map((tg) => {\n const currentGroup = nationalAverage[tg.id];\n const roleAvg = currentGroup?.sum\n ? currentGroup.sum / currentGroup.n\n : 0;\n nationalSum += nationalAverage[tg.id]?.sum || 0;\n nationalNValue += nationalAverage[tg.id]?.n || 0;\n return {\n id: tg.id,\n average: Math.floor(roleAvg * 10) / 10,\n };\n });\n\n const nationalAvg = nationalSum / nationalNValue;\n\n const nationalAverageRow = {\n factor: getTranslatedText(\"nationalAverage\", lang, translations),\n factorAverage: Math.floor(nationalAvg * 10) / 10,\n factorResponses: nationalAvgRows,\n rowId: 0,\n };\n\n const dimensionData = config.map((ci) => {\n // get list of all responses related to current category.\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses.map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const ciAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n const rowCols = tableGroups.map((tg) => {\n const ciResponses = dimensionInfo\n .filter((di) => di.id === ci.id)\n .map((di) => {\n const diResponses = di.responses\n .filter((dir) => dir.role === tg.id)\n .map((dr) => dr.responses);\n return diResponses.flat();\n })\n .flat();\n const roleAvg =\n ciResponses.reduce((total, b) => {\n return (total += b.response ? Number(b.response) : 0);\n }, 0) / ciResponses.length;\n\n return {\n id: tg.id,\n average: Math.floor(roleAvg * 10) / 10,\n };\n });\n\n return {\n factor: ci.name,\n factorAverage: Math.floor(ciAvg * 10) / 10,\n factorResponses: rowCols,\n rowId: ci.id,\n };\n });\n\n dimensionData.unshift(nationalAverageRow);\n\n return {\n dimension: d.title,\n dimensionId: d.id,\n dimensionAvg: null,\n data: dimensionData,\n };\n });\n\n return tableData;\n };\n\n tableData = getOTPTableData(calculated.responses);\n\n const createTables = (\n dimension,\n headerColor,\n wrapRow = true,\n hideReverseText = true\n ) => {\n return (\n \n \n \n \n \n {dimension.dimension} Domain Overall \n \n \n {dimension.dimensionAvg} \n \n \n \n {getTranslatedText(\"by\", lang, translations)}{\" \"}\n {isFrench ? anchorTwo?.fr_name : anchorTwo.name}\n \n \n \n \n \n \n \n {getTranslatedText(\"avg\", lang, translations)} \n \n \n {getTranslatedText(\"Athlete\", lang, translations)} \n \n \n {getTranslatedText(\"Coach\", lang, translations)} \n \n \n SSSM \n \n \n {getTranslatedText(\"NSOStaff\", lang, translations)} \n \n \n {dimension.data.map((row) => {\n return (\n \n \n {row.factor} \n \n \n {row.factorAverage || \"--\"} \n \n {row.factorResponses.map((col) => {\n return (\n \n {col.average || \"--\"} \n \n );\n })}\n \n );\n })}\n \n \n {!hideReverseText && (\n \n {getTranslatedText(\"reverseTextMsg\", lang, translations)}\n \n )}\n \n );\n };\n\n return (\n <>\n \n \n {getTranslatedText(\"comparativeData\", lang, translations)}\n \n {createTables(tableData[0], \"blue\")} \n )}\n {tableData.length > 0 && (\n {createTables(tableData[1], \"blue\")} \n )}\n \n \n );\n};\n\nexport default OTPDimensions;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 10,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n },\n TD2: {\n fontSize: 10,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n },\n TH: {\n fontSize: 10,\n padding: 4,\n borderBottom: \"0.5px solid grey\",\n borderRight: \"0.5px solid grey\",\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getFeedbackOTP } from \"../../utils/cultureUtils\";\nimport Table from \"./Table\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nconst Recommendations = (props) => {\n const { comments, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n return (\n <>\n \n \n {getTranslatedText(\"recommendations\", lang, translations)}\n \n \n {comments} \n \n \n \n );\n};\n\nexport default Recommendations;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getFeedbackOTP } from \"../../utils/cultureUtils\";\nimport Table from \"./Table\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nFont.registerHyphenationCallback((word) => [word]);\n\nconst PerformanceOverallComment = (props) => {\n const { comments, aiTitle, aiData, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n return (\n <>\n \n {aiTitle} \n \n {aiData\n .filter((item) => item?.response?.ai_result?.length > 0)\n .map((item, index) => {\n return (\n \n {item?.question} \n {item?.response?.ai_result\n ?.split(/[0-9]\\./)\n ?.filter((item) => item !== \"\")\n ?.map((item) => {\n return (\n \n {item.replace(/\\:\\n\\n/g, \"\")}\n \n );\n })}\n \n );\n })}\n \n \n \n );\n};\n\nexport default PerformanceOverallComment;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n T3: {\n fontSize: 14,\n fontWeight: 700,\n color: \"#000921\",\n marginBottom: 10,\n },\n});\n","import React from \"react\";\nimport { Page, Text, View, StyleSheet, Font } from \"@react-pdf/renderer\";\nimport Barlow from \"assets/fonts/BarlowSemiCondensed-Light.ttf\";\nimport Side from \"./Side\";\nimport Footer from \"./Footer\";\nimport { getFeedbackOTP } from \"../../utils/cultureUtils\";\nimport Table from \"./Table\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./translations\";\n\nFont.register({\n family: \"Barlow\",\n src: Barlow,\n format: \"truetype\",\n});\n\nFont.registerHyphenationCallback((word) => [word]);\n\n\nconst PersonOverallComment = (props) => {\n const { comments, aiTitle, aiData, titleColor, isFrench } = props;\n const lang = isFrench ? \"fr\" : \"en\";\n\n return (\n <>\n \n {aiTitle} \n \n {aiData\n .filter((item) => item?.response?.ai_result?.length > 0)\n .map((item, index) => {\n return (\n \n {item?.question} \n {item?.response?.ai_result\n ?.split(/[0-9]\\./)\n ?.filter((item) => item !== \"\")\n ?.map((item) => {\n return (\n \n {item.replace(/\\:\\n\\n/g, \"\")}\n \n );\n })}\n \n );\n })}\n \n \n \n );\n};\n\nexport default PersonOverallComment;\n\n// Create styles\nconst styles = StyleSheet.create({\n title: {\n fontSize: 16,\n fontWeight: 700,\n paddingBottom: 5,\n borderBottom: \"0.5px solid black\",\n width: \"100%\",\n marginBottom: 15,\n },\n tableStyle: {\n width: \"100%\",\n border: \"0.5px solid grey\",\n marginTop: 20,\n },\n TD: {\n fontSize: 10,\n padding: 4,\n },\n H: {\n display: \"flex\",\n width: \"100%\",\n flexDirection: \"row\",\n padding: 3,\n },\n page: {\n padding: 60,\n paddingHorizontal: 80,\n },\n p: {\n fontSize: 11,\n marginBottom: 10,\n lineHeight: 1.7,\n },\n T2: {\n fontSize: 20,\n fontWeight: 700,\n color: \"#000921\",\n },\n line: {\n width: 75,\n height: 4,\n backgroundColor: \"#000921\",\n marginTop: 5,\n marginBottom: 20,\n },\n description: {\n lineHeight: 1.7,\n fontSize: 11,\n marginTop: 0,\n },\n tableSubText: {\n fontSize: 12,\n fontWeight: 200,\n },\n textPadding: {\n paddingHorizontal: 70,\n },\n T3: {\n fontSize: 14,\n fontWeight: 700,\n color: \"#000921\",\n marginBottom: 10,\n },\n});\n","/// Libraries\nimport React from \"react\";\nimport { Document, StyleSheet, Font } from \"@react-pdf/renderer\";\n\n// Components\nimport Intro from \"./OTP/Intro\";\nimport PersonRisks from \"./OTP/PersonRisks\";\nimport PerformanceRisks from \"./OTP/PerformanceRisks\";\nimport OverallRanking from \"./OTP/OverallRanking\";\n\nimport Comments from \"./OTP/Comments\";\nimport PersonDimension from \"./OTP/PersonDimension\";\nimport PerformanceDimension from \"./OTP/PerformanceDimension\";\n\nimport CultureMap from \"./OTP/CultureMap\";\n\n// Templates\nimport defaultTemplate from \"../templates/default.json\";\nimport Methodology from \"./OTP/Methodology\";\n\n// Utils\nimport { getFeedbackOTP } from \"../utils/cultureUtils\";\nimport AreasOfImprovement from \"./OTP/AreasOfImprovement\";\nimport OTPDimensions from \"./OTP/OTPDimensions\";\nimport Recommendations from \"./OTP/Recommendations\";\nimport PerformanceOverallComment from \"./OTP/PerformanceOverallComment\";\nimport PersonOverallComment from \"./OTP/PersonOverallComment\";\nimport { getTranslatedText } from \"components/CWFPDF/pdfUtils\";\nimport translations from \"./OTP/translations\";\n// Fonts\nimport Poppins from \"assets/fonts/Poppins-Light.ttf\";\nimport PoppinsBold from \"assets/fonts/Poppins-Bold.ttf\";\nimport PoppinsMedium from \"assets/fonts/Poppins-Medium.ttf\";\nimport PoppinsRegular from \"assets/fonts/Poppins-Regular.ttf\";\nimport PoppinsItalic from \"assets/fonts/Poppins-LightItalic.ttf\";\n\nFont.register({\n family: \"Poppins\",\n fonts: [\n { src: Poppins },\n { src: PoppinsItalic, fontWeight: 200 },\n { src: PoppinsBold, fontWeight: 700 },\n { src: PoppinsMedium, fontWeight: 500 },\n { src: PoppinsRegular, fontWeight: 400 },\n ],\n format: \"truetype\",\n});\n\n// Create styles\nconst styles = StyleSheet.create({\n page: {\n padding: 60,\n paddingHorizontal: 80,\n fontFamily: \"Poppins\",\n },\n section: {\n height: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n pageNumber: {\n position: \"absolute\",\n fontSize: 12,\n bottom: 30,\n left: 0,\n right: 0,\n textAlign: \"center\",\n color: \"grey\",\n },\n title: {\n fontSize: 40,\n textAlign: \"center\",\n },\n image: {\n marginVertical: 15,\n marginHorizontal: 100,\n },\n table: {\n marginHorizontal: 10,\n },\n subHeading: {\n fontSize: 12,\n paddingBottom: 50,\n },\n spiderSubHeading: {\n fontSize: 12,\n paddingBottom: 30,\n display: \"flex\",\n textAlign: \"center\",\n zIndex: 999,\n },\n heading: {\n paddingBottom: \"15px\",\n left: 0,\n fontSize: 22,\n fontWeight: 500,\n },\n doc: {\n fontFamily: \"Poppins\",\n fontSize: 14,\n },\n spiderImage: {\n left: 55,\n top: -28,\n maxHeight: 300,\n maxWidth: 400,\n height: 300,\n width: 400,\n zIndex: -99,\n },\n spiderHeading: {\n fontSize: 18,\n paddingBottom: 10,\n fontWeight: 500,\n },\n});\n\nconst Template = (props) => {\n const {\n chart,\n chartTwo,\n nav,\n categories,\n structure,\n calculated,\n anchor,\n config,\n selectedReport,\n selectedOrg,\n overview,\n reportData,\n rule,\n filterData,\n otpView,\n comments,\n selectedSport,\n reportComments,\n aiData,\n isFrench,\n\n completionRate,\n surveyDate,\n } = props;\n\n const lang = isFrench ? \"fr\" : \"en\";\n\n const orgTemplate = defaultTemplate;\n\n const anchorGroup = categories.categories.find((cat) => cat.id === anchor);\n let totalResponses = 0;\n\n const titleColor = \"#031A4A\";\n const tableBorderColor = \"#031A4A\";\n\n Object.keys(calculated.overall).forEach((k) => {\n totalResponses = totalResponses + calculated.overall[k].n1;\n });\n\n // Comments to display can be configured here.\n const healthAndWellbeingQuestions = [102, 104];\n const leadershipQuestions = [107];\n // const hasLeadershipComments = getFeedbackOTP(\n // filterData,\n // structure,\n // categories,\n // leadershipQuestions[0]\n // )?.filter((comment) => comment?.text !== \"\");\n\n return (\n \n {/* INTRO PAGE */}\n \n );\n};\n\nexport default Template;\n","import React, { useEffect, useState } from \"react\";\nimport Template from \"../pages/Template\";\nimport TemplateOTP from \"../pages/TemplateOTP\";\nimport { saveAs } from \"file-saver\";\nimport { pdf } from \"@react-pdf/renderer\";\nimport { Loader, Icon } from \"semantic-ui-react\";\nimport { Button } from \"semantic-ui-react\";\nimport styled from \"styled-components\";\n\nconst PDFInstance = (props) => {\n const {\n data,\n filteredData,\n organizationData,\n dummyData,\n reportData,\n nav_state,\n WhiteLabel,\n questionStructure,\n get_survey_structure,\n selectedReport,\n rule,\n URI,\n spiderOptions,\n spiderTwoOptions,\n calculated,\n setPdfGenerating,\n overview,\n isOTP,\n otpView,\n URI_OTP,\n accessSubfactor,\n previous,\n summarizedData,\n sportName,\n downloadIcon,\n reset,\n isFrench,\n structure,\n // dialOne,\n } = props;\n\n const [saved, setSaved] = useState(false);\n const [loading, setLoading] = useState(false);\n const [documentBlob, setDocumentBlob] = useState();\n const [documentUrl, setDocumentUrl] = useState();\n /**** Helper Functions ****/\n const generatePDF = async () => {\n // This hides the loading spinner which displays *BEFORE* the pdf offially starts generating.\n setPdfGenerating(false);\n setLoading(true);\n if (isOTP) {\n const pdfDoc = await pdf(\n \n
\n );\n }\n\n if (documentUrl && !overview) {\n setTimeout(() => {\n window.close();\n }, 500);\n\n return (\n {props.data.summary[0].toFixed(1)} {getDifference(0)}
\n {props.dimensions!=1?props.questions.dimensions[0].title : ''}\n {props.data.summary[1].toFixed(1)} {getDifference(1)}
\n\t {props.questions.dimensions[1].title}\n\t \n\t\t
{averages[0].toFixed(1)} {getDifference(0,averages)}
\n {props.dimensions!=1?props.questions.dimensions[0].title : ''}\n {averages[1].toFixed(1)} {getDifference(1,averages)}
\n\t {props.questions.dimensions[1].title}\n\t {props.data.summary[0].toFixed(1)}
\n {props.dimensions!=1?props.questions.dimensions[0].title : ''}\n {props.data.summary[1].toFixed(1)}
\n\t {props.questions.dimensions[1].title}\n\t \n {/*\t\t\t\tSurvey completion \n\t\t\t\tMarch 4th, 2020 */}\n Culture Factor Ranking \n \n
\n \n {filteredData1.map((item, i) => {\n\t\t return \n\t\t navigate(item)}>\n\t\t {/*{i + 1 + \". \"} */}\n\t\t {\n\t\t questions?.dimensions[item?.id]\n\t\t ?.factors[item?.factor]?.title\n\t\t }\n\t\t \n\t\t \n\t\t {Math.floor(item?.response * 10) / 10}\n {get_last(item)}\n\t\t \n\t\t
\n\t\t } )}\n
\n\n )\n}\n\nexport default LinkedRow\n\n\nconst StyledProgressBar = styled(Progress)`\n & > .bar {\n background-color:#66D686 !important;\n border-radius:15px !important;\n }\n border-radius:15px !important;\n`;\n\nconst Row = styled.div`\n display: flex;\n width: 100%;\n align-items: center;\n padding: 2.5px 0px 2.5px 2.5px;\n margin-bottom:10px;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 10px;\nline-height: 15px;\n\ncolor: #7E7E7E;\n`;\n\nconst Linked = styled.div`\n font-weight: 300;\n width: 150px;\n cursor: pointer;\n display: flex;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst Score = styled.div`\n width: 40px;\n margin-left: 25px;\n font-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 18px;\ntext-align: right;\n\ncolor: #7E7E7E;\n`;\n\nconst Diff = styled.span`\n font-size:10px;\n margin-left:5px;\n color:${props=>props.color};\n\n`","import styled from \"styled-components\";\nimport React from \"react\";\nimport LegendStyle from \"./LegendStyle\";\nimport { useSelector, shallowEqual } from \"react-redux\";\nimport BasicLegend from \"./BasicLegend\";\nimport Empty from \"./Empty\";\nimport Heatmap from \"./Heatmap\";\nimport { Icon,Progress } from \"semantic-ui-react\";\nimport LinkedRow from './LinkedRow'\nimport {\n calculate_data,\n check_for_subfactors,\n getTitle,\n} from \"./data_navigation/calculate_data\";\nimport Chart from \"react-apexcharts\";\nimport ChartLoading from './ChartLoading'\nimport LegendIcon from './LegendIcon'\n\n\n\nfunction randomIntFromInterval(min, max) {\n // min and max included\n return Math.floor(Math.random() * (max - min + 1) + min);\n}\n\nconst colors2 = [\"48, 120, 255\", \"8, 194, 81\", \"126, 36, 234\", \"255, 45, 85\"];\n\nconst colors = [\n \"#0387EF\",\n \"#FFC600\",\n \"#02AE5B\",\n \"#FF0000\",\n \"#fcba03\",\n \"#2b704d\",\n \"#472aa3\",\n \"#a3852a\",\n \"#a32a89\",\n \"#2a8ba3\",\n \"#a1a32a\",\n \"#2aa330\",\n];\n\nconst options = [\n { key: 1, text: \"Winter Sports\", value: 1 },\n { key: 2, text: \"Summer Sports\", value: 2 },\n { key: 3, text: \"Para Sports\", value: 3 },\n];\n\nconst options2 = [\n { key: 1, text: \"Overview\", value: 1 },\n { key: 2, text: \"Technical Leaders\", value: 2 },\n { key: 3, text: \"Sport Scientists\", value: 3 },\n { key: 3, text: \"Athletes\", value: 3 },\n { key: 5, text: \"Coaches\", value: 5 },\n];\n\nconst Grid = ({\n data,\n nav,\n refresh,\n structure,\n WhiteLabel,\n setSub,\n rule,\n questions,\n pdf,\n overviewReport = false,\n selected\n}) => {\n const [highlight, setHighlight] = React.useState(null);\n const [select, setSelected] = React.useState(0);\n const [tab, setTab] = React.useState(1);\n const anchor = useSelector((state) => state.audit?.anchor, shallowEqual);\n const [calculated, setCalculated] = React.useState([]);\n const [render, setRender] = React.useState(false);\n const [chart, setChart] = React.useState(data3.options);\n const [series, setData] = React.useState(data3.series);\n const [loading, setLoading] = React.useState(true);\n\n\n const get_survey_structure = useSelector(\n (state) => state.surveystructure.survey_structure,\n shallowEqual\n );\n const pdfAnchor = get_survey_structure[0].categories.find(\n (f) => f.priority.toLowerCase() === \"primary\"\n ).id;\n\n const checkSubFactors = (id, option) => {\n if (structure.categories[id].subfactors.length > 0) {\n let factor = structure.categories[id].subfactors.filter(\n (f) => f.parent == option\n );\n if (factor.length > 0) {\n return true;\n }\n }\n\n return false;\n };\n\n const handleBarClick = ({ clientX, clientY }, chartContext, {dataPointIndex} ) => {\n setSelected(dataPointIndex)\n };\n\n const clipLength = (s) =>{\n if(s.length>17){\n return s.slice(0,15) + '...'\n }\n return s\n }\n\n React.useEffect(() => {\n setLoading(true);\n let _series = calculated.map((item, i) => {\n return {\n name: clipLength(item.title.name),\n data: item.summary[0].toFixed(1),\n };\n })\n\n\n setData([{ name: \"Average Scores\", data: _series.map((i) => i.data) }]);\n let _chart = chart;\n _chart.colors = [WhiteLabel.highlight, \"#c9c9c9\"];\n _chart.xaxis.categories = _series.map((i) => i.name);\n\n\n _chart.chart.events= {\n dataPointSelection: handleBarClick\n }\n\n _chart.colors= [function ({ value, seriesIndex, dataPointIndex, w }) {\n if (dataPointIndex == select) {\n return \"#66D686\";\n } else {\n return \"#2C4FE2\";\n }\n }]\n\n setChart(_chart);\n setTimeout(() => setLoading(false), 300);\n }, [calculated,select]);\n\n React.useEffect(()=>{\n setSelected(0)\n },[calculated])\n\n React.useEffect(()=>{\n setSelected(0)\n },[anchor])\n\n\n\n React.useEffect(() => {\n if (anchor) {\n console.log(data)\n setRender(!render);\n setCalculated(calculate_data(data, nav, structure, anchor, rule, questions).sort((a,b)=>{\n let _a = parseInt(a.summary[0]) ? parseInt(a.summary[0]) : 0\n let _b = parseInt(b.summary[0]) ? parseInt(b.summary[0]) : 0\n return _b - _a\n }\n ));\n }\n }, [nav, refresh, anchor, data]);\n\n if (calculated && calculated.filter((f) => f.raw.length > 0).length == 0) {\n return \n ({(calculated[select].summary_diff[0]*10).toFixed(1)}%)\n
\n \n ({(calculated[select].summary_diff[0]*10).toFixed(1)}%)\n
\n Try again
\n \n
\n );\n }\n\n const overviewChart = canComponentRender(\n testing,\n testing ? dummyData : reportData\n ) && (\n \n
\n );\n\n const testingControl = testing ? (\n \n {downloadButton}\n {generatePdf && pdfInstance}\n
\n );\n};\n\nconst Test = styled.button`\n width: 80px;\n height: 35px;\n position: absolute;\n margin-top: ${(props) => (props.overview ? \"-50px\" : \"-20px\")};\n margin-left: ${(props) => (props.overview ? \"15px\" : \"0px\")};\n`;\n\nexport default DEIPDF;\n","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\nimport { Select } from \"semantic-ui-react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport { SET_DATA_ACNHOR } from \"constants/actions\";\nimport { get } from \"http\";\n\nconst Anchor = (props) => {\n const dispatch = useDispatch();\n const get_survey_structure = useSelector(\n (state) => state.surveystructure.survey_structure,\n shallowEqual\n );\n\n const get_employee_permission = useSelector( (state) => state.employee_permission, shallowEqual);\n\n const build_state = (is_french) => {\n let _state = get_survey_structure[0]?.categories\n .filter((f) => f.priority.toLowerCase() !== \"primary\")\n .map((i) => {\n return {\n text: is_french ? (i.fr_name ? i.fr_name : i.name) : i.name,\n value: i.id,\n };\n });\n if (!props.pdf && _state) {\n _state.unshift({\n value: get_survey_structure[0].categories.find(\n (f) => f.priority.toLowerCase() === \"primary\"\n ).id,\n text: is_french ? \"Aperçu\" : \"Overview\",\n });\n }\n\n // _state.push({\n // value: -1,\n // text: \"BIPOC\",\n // });\n\n return _state;\n };\n\n const [selected, setSelected] = useState(\n props.selectedAnchor ||\n get_survey_structure?.[0]?.categories.find(\n (f) => f.priority === \"primary\"\n ).id\n );\n\n\n const [anchor_list, set_anchor_list] = useState();\n\n useEffect(() => {\n if (!selected && get_survey_structure?.[0]) {\n setSelected(\n get_survey_structure?.[0]?.categories.find(\n (f) => f.priority === \"primary\"\n ).id\n );\n }\n }, [selected, get_survey_structure]);\n\n useEffect(()=>{\n if(get_employee_permission){\n\n if(get_employee_permission.employee_permission?.[0]?.details?.[0]?.name_id){\n setSelected(get_employee_permission.employee_permission?.[0].details[0].name_id)\n }\n }\n },[get_employee_permission])\n\n useEffect(() => {\n if (props.pdf && anchor_list) {\n const selectedValue = anchor_list.find(\n (anchor) => anchor.text === \"Roles\"\n );\n setSelected(\n (selectedValue && selectedValue?.value) || anchor_list?.[0]?.value\n );\n }\n }, [anchor_list]);\n\n useEffect(() => {\n if (!anchor_list) {\n set_anchor_list(build_state(props.is_french));\n }\n }, [props]);\n\n useEffect(() => {\n dispatch({\n type: SET_DATA_ACNHOR,\n payload: selected || props.selectedAnchor,\n });\n }, [dispatch, selected, props.selectedAnchor]);\n\n return (\n\n \n setSelected(t.value)}\n />\n
\n );\n};\n\nexport default Anchor;\n\nconst Label = styled.div`\n font-size: 10px;\n text-transform: uppercase;\n color: grey;\n margin-top: -15px;\n margin-bottom: -3px;\n`;\n\nconst StyledSelect = styled(Select)`\n font-family: \"Inter\", sans-serif !important;\n border-radius: 20px !important;\n font-size: 10px !important;\n color: #7e7e7e;\n\n .item {\n font-size: 10px !important;\n color: #7e7e7e;\n font-family: \"Inter\", sans-serif !important;\n }\n`;\n","import React from 'react'\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false, componentFallback: props.componentFallback };\n }\n \n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n \n componentDidCatch(error, errorInfo) {\n // You can also log the error to an error reporting service\n // logErrorToMyService(error, errorInfo);\n }\n \n render() {\n if (this.state.hasError) {\n\n if (this.state.componentFallback) {\n return this.state.componentFallback\n } else {\n // You can render any custom fallback UI\n return Something went wrong.
;\n }\n }\n \n return this.props.children; \n }\n }\n\nexport default ErrorBoundary","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Message, Icon, Confirm } from \"semantic-ui-react\";\nimport { Pagination, Dimmer, Loader, Popup } from \"semantic-ui-react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\n\nimport Select from \"react-select\";\n\nimport {\n SG_GET_DEBRIEF_SCHEDULES,\n ADD_ACTIVE_PAGE_DEBRIEF_SCHEDULE,\n SG_DELETE_DEBRIEF_SCHEDULE,\n SG_GET_CULTURE_AUDIT_REPORTS,\n} from \"constants/actions\";\n\nimport format from \"date-fns/format\";\nimport SurveyStatus from \"components/CultureAudit/SurveyStatus\";\nimport CulturePDF from \"components/PDF\";\nimport DeiPDF from \"components/DEI-PDF\";\nimport Anchor from \"reports/Audit/Anchor\";\nimport ErrorBoundary from \"ErrorBoundary\";\n\n// used only for editSurvey.index.js \nconst StatusPendingHistoryList = ({\n organizationId,\n briefId,\n setBriefId,\n fetchAgain,\n setFetchAgain,\n showErrors,\n setOpen,\n showItems,\n surveyType,\n setAlertMessage,\n setShowMenu,\n pdfConfig,\n primaryCategory,\n primarySecondaryName,\n tab,\n}) => {\n const dispatch = useDispatch();\n\n const [totalPages, setTotalPages] = useState(1);\n const [pageLoading, setPageLoading] = useState(false);\n const [activePage, setActivePage] = useState(1);\n const [debriefSchedules, setDebriefSchedules] = useState([]);\n const [filteredDebriefs, setFilteredDebriefs] = useState();\n const [deleteId, setDeleteId] = useState(false);\n const [deletedRecord, setDeletedRecord] = useState(false);\n\n const [confirmDelete, setConfirmDelete] = useState(false);\n const [showSurveyStatus, setShowSurveyStatus] = useState(0);\n\n const [selectedPrimary, setSelectedPrimary] = useState([]);\n\n const [nonHistory, setNonHistory] = useState(true);\n\n const [currStatusPage, setCurrStatusPage] = useState(\"\");\n\n const [filteredCategories, setFilteredCategories] = useState();\n const [isAdmin, setIsAdmin] = useState();\n // this has been set in django if you use non basic pagination\n // this page using basic pagination\n const defaultPageSize = 12;\n\n const {\n get_culture_audit_reports,\n get_survey_structure,\n get_debrief_schedules,\n get_employees,\n } = useSelector(\n (state) => ({\n get_debrief_schedules: state.debrief_schedule,\n get_survey_structure: state.surveystructure.survey_structure,\n get_culture_audit_reports: state.debrief_schedule.culture_audit_reports,\n get_employees: state.employees,\n\n }),\n shallowEqual\n );\n\n const ambassadorId = useSelector(\n (state) => Number(state.auth?.ambassador_id),\n shallowEqual\n );\n \n \n useEffect(() => {\n setFilteredCategories(get_survey_structure?.[0]?.categories.filter(\n (c) => c.priority === \"primary\"\n )?.[0]?.options)\n },[get_survey_structure])\n\n useEffect(() => {\n setIsAdmin(false);\n \n if (get_employees) {\n // setUserEmployee(get_employees?.userEmp);\n // check for admin\n if (get_employees.userEmp?.account_type === 5) {\n setIsAdmin(true);\n }\n \n }\n }, [get_employees]);\n\n\n\n\n const anchor = useSelector((state) => state.audit?.anchor, shallowEqual);\n useEffect(() => {\n // console.log(tab)\n setDebriefSchedules(get_debrief_schedules.debrief_schedule.results);\n\n if (get_debrief_schedules.activePage > 0) {\n if (get_debrief_schedules.activePage !== activePage) {\n setActivePage(get_debrief_schedules.activePage);\n }\n }\n }, [get_debrief_schedules, activePage, tab]);\n\n useEffect(() => {\n setTotalPages(\n Math.ceil(get_debrief_schedules.debrief_schedule?.count / defaultPageSize)\n );\n }, [activePage, get_debrief_schedules]);\n\n // console.log(get_debrief_schedules)\n // console.log(get_debrief_schedules.debrief_schedule.results)\n // console.log(debriefSchedules)\n // console.log(tab)\n\n useEffect(() => {\n if (organizationId && activePage) {\n dispatch({\n type: SG_GET_DEBRIEF_SCHEDULES,\n payload: `page=${activePage}&type_of=${surveyType}&organization=${organizationId}${\n showItems ? `&curr-status=${showItems}` : \"\"\n }${selectedPrimary?.value ? `&name=${selectedPrimary?.value?.trim()}` : \"\"}`,\n });\n if (fetchAgain) {\n setFetchAgain(false);\n }\n if (deletedRecord) {\n setDeletedRecord(false);\n }\n }\n }, [\n dispatch,\n organizationId,\n activePage,\n fetchAgain,\n setFetchAgain,\n deletedRecord,\n surveyType,\n showItems,\n selectedPrimary,\n ]);\n\n useEffect(() => {\n if (!get_culture_audit_reports?.response && surveyType) {\n if (ambassadorId) {\n dispatch({\n type: SG_GET_CULTURE_AUDIT_REPORTS,\n payload: `audit-type-id=${surveyType}&organization=${organizationId}`,\n });\n } else {\n dispatch({\n type: SG_GET_CULTURE_AUDIT_REPORTS,\n payload: `audit-type-id=${surveyType}`,\n });\n }\n }\n }, [dispatch, surveyType, ambassadorId, get_culture_audit_reports.response, organizationId]);\n\n useEffect(() => {\n if (showItems === \"history\") {\n setNonHistory(false);\n }\n }, [showItems]);\n\n useEffect(() => {\n if (showItems !== currStatusPage) {\n // console.log('reset page no')\n setCurrStatusPage(showItems);\n setActivePage(1);\n dispatch({\n type: ADD_ACTIVE_PAGE_DEBRIEF_SCHEDULE,\n payload: 1,\n });\n }\n }, [showItems, dispatch, currStatusPage]);\n\n function ChangedPage(e, { activePage }) {\n setActivePage(activePage);\n dispatch({\n type: ADD_ACTIVE_PAGE_DEBRIEF_SCHEDULE,\n payload: activePage,\n });\n }\n\n useEffect(() => {\n setPageLoading(true);\n const timer1 = setTimeout(() => {\n setPageLoading(false);\n }, 2000);\n return () => clearTimeout(timer1);\n }, [dispatch, fetchAgain, deletedRecord, selectedPrimary]);\n\n useEffect(() => {\n setFilteredDebriefs(debriefSchedules);\n \n }, [debriefSchedules]);\n // const filter =\n\n // pdfConfig?.[0].data.introTemplate === 2 ? (\n //\n \n setSelectedPrimary(e)}\n value={selectedPrimary}\n // isMulti\n isClearable\n options={primaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n
\n | Primary Factor | \nDate & Time (Local) | \nStatus | \nResponses | \nActions | \n {/* {pdfConfig?.length > 0 &&|
|---|---|---|---|---|---|
| {brief?.name} | \n\n \n Start # {\" \"}\n {format(\n new Date(brief?.scheduled_for?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n \n \n {showItems === \"pending\" && (\n <>\n Close #{\" \"}\n {format(\n new Date(brief?.close_at?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n \n )}\n \n \n Timezone # {brief?.time_zone}\n \n | \n {brief?.status_text} | \n\n {nonHistory ? (\n brief.status > 2 ? (\n \n {brief?.total_responses} / {brief?.total_requests}\n \n ) : (\n \"Pending\"\n )\n ) : (\n \n {Math.floor(\n Number.isNaN(\n brief?.total_responses / brief?.total_requests\n )\n )\n ? 0\n : Math.floor(\n (brief?.total_responses / brief?.total_requests) *\n 100\n )}\n %\n \n )}\n \n \n {brief?.total_responses} / {brief?.total_requests}\n \n | \n \n {(currStatusPage === \"history\" || brief?.status === 21) && (\n | \n\n {/* {pdfConfig?.length > 0 && hasAnchor && (\n \n | \n )} */}\n
\n {debriefSchedule?.status === 3 && (\n <>\n setShowConfirm(false)}\n onConfirm={CloseSurvey}\n />\n \n )}\n
\n \n \n
\n
| Name | \nReminder | \nStatus | \nAction | \n
|---|
\n Survey would close at{\" \"}\n {debriefSchedule?.close_at &&\n format(\n new Date(debriefSchedule?.close_at?.toLocaleString()),\n \"EEEE, do MMM yy - h:mm a\"\n )}\n
\n Extend it by{\" \"}\n\n \n setSelectedPrimary(e)}\n value={selectedPrimary}\n // isMulti\n isClearable\n options={primaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n
\n | Primary Factor | \nDate & Time | \nStatus | \nResponses | \nActions | \n {/* {pdfConfig?.length > 0 &&
|---|---|---|---|---|
| SurveyDetails(brief?.id)}> | \n SurveyDetails(brief?.id)}>\n | \n SurveyDetails(brief?.id)}> | \n SurveyDetails(brief?.id)}>\n {brief.status > 2 ? (\n | \n \n | \n )} */}\n
\n
\n
| Name | \nStatus | \n
|---|
\n \n setSelectedPrimary(e)}\n value={selectedPrimary}\n // isMulti\n isClearable\n options={primaryCategory}\n // getOptionLabel={(option) => option.name}\n // getOptionValue={(option) => option.role}\n />\n
\n | Primary Factor | \nDate & Time (Local) | \nStatus | \nResponses | \nActions | \n {/* {pdfConfig?.length > 0 &&|
|---|---|---|---|---|---|
| {brief?.name} | \n\n \n Start # {\" \"}\n {format(\n new Date(brief?.scheduled_for?.toLocaleString()),\n \"EEEE, MMM do h:mm a\"\n )}\n \n\n \n Timezone # {brief?.time_zone}\n \n | \n {brief?.status_text} | \n\n {nonHistory ? (\n brief.status > 2 ? (\n \n {brief?.total_responses} / {brief?.total_requests}\n \n ) : (\n \"Pending\"\n )\n ) : (\n \n {Math.floor(\n Number.isNaN(\n brief?.total_responses / brief?.total_requests\n )\n )\n ? 0\n : Math.floor(\n (brief?.total_responses / brief?.total_requests) *\n 100\n )}\n %\n \n )}\n \n \n {brief?.total_responses} / {brief?.total_requests}\n \n | \n \n | \n {/* \n {pdfConfig?.length > 0 && hasAnchor && (\n \n | \n )} */}\n
\n {[\"Calendar\", \"Pending\", \"History\"].map((item, i) => {\n return (\n setTab(i)} selected={i === tab} key={i}>\n {item}\n \n );\n })}\n
\n :\n \n {[\"Calendar\"].map((item, i) => {\n return (\n setTab(i)} selected={i === tab} key={i}>\n {item}\n \n );\n })}\n
\n }\n\n {/* {subfactorFound ? */}\n {userAdmin === true || userEmployee?.survey_schedule === 1 ? (\n briefId ? (\n \n\t\t\t\t\t\t<LegendIcon/>Smart insights \n\t\t\t\t\t\t\n\t\t\t\t\t\t\tCritical factors that are most impacted and in need of\n\t\t\t\t\t\t\tattention\n\t\t\t\t\t\t \n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\n\n{/*\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t2.3 \n\t\t\t\t\tStdev\n\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t43rd \n\t\t\t\t\tCanadian Norm\n\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t66th \n\t\t\t\t\tSport Norm\n\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t85th \n\t\t\t\t\tRole Norm\n\t\t\t\t \n\t\t\t */}\n\n\n\t\t\t\n\t\t\t\tStandard Deviation \n\t\t\t\t\n\n\t\t\t\tCanadian Norm \n\t\t\t\t\n\n\t\t\t\tSport Norm \n\t\t\t\t\n\n\t\t\t\tRole Norm \n\t\t\t\t\n\t\t\t \n\t\t\t
\n\n\t\t\n\n\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{sortedData.map((x, i) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t \n\t\t\t\t{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n\t\t\t\t\t\n\t\t\t\t\t{sortedData.map((c, i) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t \n\t\t\t
\n\t\t\n\t);\n};\n\nconst TableContainer = styled.div`\n\twidth: 100%;\n\tmargin-bottom: 30px;\n`;\n\nconst LabelContainer = styled.div`\n\tcursor: pointer;\n\theight:35px;\n\tdisplay:flex;\n\talign-items:center;\n\tfont-size:12px;\n\toverflow:hidden;\n\tmargin-bottom:5px;\n\n\t&:hover {\n\t\tfont-weight: bold;\n\t\ttext-decoration: underline;\n\t}\n`;\n\nconst Scale = styled.div`\n\tmargin-bottom:5px;\n\tdisplay: flex;\n`;\n\nconst First = styled.div`\n\tbackground-color: ${(props) => \"rgba(\" + props.color + \",1)\"};\n\tdisplay: flex;\n\ttext-transform: uppercase;\n\tfont-size: 14px;\n\tfont-weight: bold;\n\tcolor: white;\n\tborder-top: 1px solid black;\n\theight: 30px;\n\talign-items: center;\n\tpadding-left: 5px;\n`;\n\nconst TTitle = styled.div`\n\ttext-transform: uppercase;\n\tfont-size: 14px;\n\tfont-weight: bold;\n\tpadding-left: 5px;\n`;\n\nconst TR = styled.div`\n\twidth: 100%;\n\tdisplay: flex;\n\tposition: relative;\n\tcursor: pointer;\n\ttransition: all 0.5s;\n\tbackground-color: ${(props) =>\n\t\tprops.highlight ? \"#F5F5F5\" : \"white\"};\n\n\t&:hover {\n\t\tbox-shadow: rgba(0, 0, 0, 0.5) 0px 1px 4px;\n\t}\n`;\n\nconst BarContainer = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: calc(55% - 2px);\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n\tflex-direction: column;\n\tjustify-content: space-evenly;\n\tpadding:10px 0px;\n`;\n\nconst BarArea = styled.div`\n\twidth:42%;\n\tposition:absolute;\n\tleft:54.5%;\n\theight:100%;\n\talign-items:center;\n\tdisplay:flex;\n`\n\nconst Bar = styled.div`\n\twidth: 12px;\n\theight: 12px;\n\tborder-radius:6px;\n\tposition: absolute;\n\tleft:${props=>'calc('+props.left*10+'% - 6px)'};\n\ttop: calc(50% - 6px);\n\tbackground-color:${props=>props.show?'#E66579':'white'};\n`;\n\nconst STDBAR = styled.div`\n\theight:12px;\n\twidth:${props=>props.width*10+'%'};\n\tbackground-color:#E66579;\n\topacity:1;\n\tleft:${props=>'calc('+props.left*10+'%)'};\n\tposition:absolute;\n\tborder-radius:10px;\n`\n\nconst Bar2 = styled.div`\n\twidth: ${(props) => props.width + \"%\"};\n\theight: 12px;\n\tbackground-color: ${(props) => props.color};\n\tposition: relative;\n\tborder-radius: 10px;\n`;\n\nconst Num = styled.div`\n\twidth: 4.09%;\n\tfont-family: 'Inter';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 10px;\nline-height: 12px;\ntext-align: center;\n\ncolor: #7E7E7E;\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n`;\n\nconst Num2 = styled.div`\n\twidth: 2%;\n\n\tposition: relative;\n\tdisplay: flex;\n\tjustify-content: center;\n`;\n\nconst TH = styled.div`\n\twidth: ${(props) => props.width + \"%\"};\n`;\n\nconst TD = styled.div`\n\twidth: ${(props) => props.width + \"%\"};\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: ${(props) => (props.center ? \"center\" : \"flex-start\")};\n\tjustify-content: ${(props) => (props.center ? \"center\" : \"flex-start\")};\n\tpadding: ${(props) => (props.dash ? \"0px \" : \"10px 5px\")};\n\tborder-right: ${(props) =>\n\t\tprops.borderRight ? \"1px solid #DFDFDF\" : \"none\"};\n\tfont-weight: ${(props) => (props.bold ? \"bold\" : 400)};\n\tborder-left: ${(props) => (props.dash ? \"1px dashed #DFDFDF \" : \"none\")};\n\tborder-bottom: ${(props) => (!props.noBottom ? \"1px solid #DFDFDF\" : \"none\")};\n\tborder-top:${(props) => (props.top ? \"1px solid #DFDFDF\" : \"none\")};\n\tbox-sizing: ${(props) => (props.dash ? \"content-box \" : \"border-box\")};\n\tposition: relative;\n\tfont-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 18px;\n\ncolor: #7E7E7E;\n\n`;\n\nconst Details = styled.div`\n\twidth: 100%;\n\tmax-height: ${(props) => (props.open ? \"1000px\" : 0)};\n\ttransition: all 1s;\n\tdisplay: flex;\n\toverflow: hidden;\n\tposition: relative;\n`;\n\nconst Score = styled.div`\n\tposition: absolute;\n\tleft: calc(100% + 10px);\n\tfont-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height:12px;\ndisplay:flex;\ncolor: #7E7E7E;\nwidth:100px;\n`;\n\nconst Expand = styled.div`\n\tfont-size: 10px;\n\ttext-transform: uppercase;\n`;\n\nconst Highlight = styled.div`\n\tmargin-top: 20px;\n\tfont-style: italic;\n\tfont-family: 'Poppins';\nfont-style: normal;\nfont-weight: 400;\nfont-size: 12px;\nline-height: 18px;\n\ncolor: #7E7E7E;\n`;\n","import styled, { keyframes } from \"styled-components\";\nimport React, { useEffect, useLayoutEffect, useState, useRef } from \"react\";\nimport Chart from \"react-apexcharts\";\nimport { Loader, Dimmer } from \"semantic-ui-react\";\nimport { useSelector, shallowEqual, useDispatch } from \"react-redux\";\nimport { consoleSandbox } from \"@sentry/utils\";\nimport LegendIcon from './LegendIcon'\n\n\nconst get_buckets = (data) => {\n\tlet response = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n\tdata.map((i) => {\n\t\tconsole.log(i)\n\t\tresponse[Math.round(i)] += 1;\n\t});\n\treturn response;\n};\n\nconst sum_distribution = (arr) => {\n\tlet _distribution = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n\tarr.map((item) => {\n\t\titem.map((s, i) => (_distribution[i] += s));\n\t});\n\treturn _distribution;\n};\n\nconst getAverage = (arr) => {\n\tlet total = 0;\n\tlet n = 0;\n\tarr.map((item, i) => {\n\t\ttotal += item * i;\n\t\tn += item;\n\t});\n\n\treturn total / n;\n};\n\nconst getAverage2 = (arr) => {\n\tlet total = 0;\n\tlet n = 0;\n\tarr.map((item, i) => {\n\t\ttotal += item ;\n\t\tn += 1;\n\t});\n\n\treturn total / n;\n};\n\nconst clipLength = (s) =>{\n if(s.length>17){\n return s.slice(0,15) + '...'\n }\n return s\n }\n\nconst Distribution = ({ labels, data, question,is_french,language_hook }) => {\n\n\tconst [chart, setChart] = useState(data3.options);\n\tconst [series, setData] = useState(data3.series);\n\tconst [loading, setLoading] = useState(true);\n\tconst WhiteLabel = useSelector(\n\t\t(state) => state.white_label?.white_label,\n\t\tshallowEqual\n\t);\n\n\tuseEffect(() => {\n\t\tsetLoading(true);\n\t\tlet _series;\n\t\tlet dimension = 'dimension' in question? question.dimension :null\n\t\tlet factor = 'factor' in question? question.factor:null\n\n\t\tif(question.id==0){\n\n\t\t\t_series = Object.keys(data.overall).map((item, i) => {\n\t\t\t\tlet name = is_french? labels.find((f) => f.id == item)?.fr? labels.find((f) => f.id == item)?.fr:labels.find((f) => f.id == item)?.name:labels.find((f) => f.id == item)?.name;\n\t\t\t\treturn {\n\t\t\t\t\tname,\n\t\t\t\t\tdata: getAverage2(data.overall[item].responses).toFixed(1),\n\t\t\t\t};\n\t\t\t});\n\t\t}\n\n\t\tif(question.level==1){\n\t\t\tlet filtered = data.summary.filter(\n\t\t\t\t(f) => Number(f.dimension) == dimension\n\t\t\t);\n\t\t\tlet secondary = [...new Set(filtered.map((i) => i.secondary))];\n\n\t\t\tlet distributions = secondary.map((i) => {\n\t\t\t\treturn filtered\n\t\t\t\t\t.filter((f) => f.secondary == i)\n\t\t\t\t\t.map((x) => x.distribution);\n\t\t\t});\n\n\t\t\t_series = distributions.map((item, i) => {\n\t\t\t\tlet f_id = secondary[i];\n\t\t\t\tlet name = is_french? labels.find((f) => f.id == f_id)?.fr? labels.find((f) => f.id == f_id)?.fr:labels.find((f) => f.id == f_id)?.name:labels.find((f) => f.id == f_id)?.name;\n\t\t\t\treturn {\n\t\t\t\t\tname,\n\t\t\t\t\tdata: getAverage(sum_distribution(item)).toFixed(1),\n\t\t\t\t};\n\t\t\t});\n\t\t}\n\t\tif(question.level==2){\n\t\t\t_series = data.summary\n\t\t\t\t.filter(\n\t\t\t\t\t(f) =>\n\t\t\t\t\t\tNumber(f.dimension) == dimension &&\n\t\t\t\t\t\tNumber(f.factor) == factor\n\t\t\t\t)\n\t\t\t\t.map((item, i) => {\n\t\t\t\t\tlet f_id = item.secondary;\n\t\t\t\t\tlet name = is_french? labels.find((f) => f.id == f_id)?.fr? labels.find((f) => f.id == f_id)?.fr:labels.find((f) => f.id == f_id)?.name:labels.find((f) => f.id == f_id)?.name;\n\t\t\t\t\treturn {\n\t\t\t\t\t\tname: name,\n\t\t\t\t\t\tdata: item.average.toFixed(1),\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t}\n\n\t\tconsole.log(dimension,factor)\n\n\t\t_series = _series.sort((a,b)=>a.data-b.data)\n\n\t\tsetData([{ name:is_french?\"Moyenne\": \"Average Scores\", data: _series.map((i) => i.data) }]);\n\t\tlet _chart = chart;\n\t\t_chart.colors = ['#476DFA', \"#c9c9c9\"];\n\t\t_chart.xaxis.categories = _series.map((i) => i.name);\n\n\t\tif(is_french){\n\t\t\t_chart.yaxis.title.text = \"Moyenne\"\n\t\t}\n\n\t\tsetChart(_chart);\n\t\tsetTimeout(() => setLoading(false), 300);\n\t}, [data, question, labels]);\n\n\treturn (\n\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{is_french?x.label.fr:x.label?.name}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{c.average.toFixed(1) } {get_score_diff(c)} \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\n\t\t\t\t\t<LegendIcon/>{language_hook('Average_anchor')} \n\t\t\t\t\t\n\t\t\t\t\t{language_hook('Average_anchor2')}\n\t\t\t\t\t \n\t\t\t\t\t
\n\t\t\t)}\n\t\t\n \n \n Feedback\n \n \n {\n categories?.categories.find((f) => f.priority == \"primary\")\n .name\n }\n \n\n \n setSelected(d.value)}\n />\n \n\n \n Risk\n \n \n\n\n\n \t{sorted\n .filter(f=>f.feedback.feedback)\n .map(item=>{\n \t\tlet _data = item\n console.log(item)\n \t\t_data.feedback.risk=get_risk(item.feedback.response,item.feedback.feedback)\n \t\treturn _data\n \t}).filter(f=>f.feedback.feedback).sort((a,b)=>b.feedback.risk-a.feedback.risk)\n \t.slice((page-1)*10,page*10)\n \t.map(item=>{\n \t\tlet primary = item.categories.find(f=>f.priority=='primary').response\n console.log(item)\n if(structure.dimensions.length==1 && item.feedback.id!=1 || structure.dimensions.length>1){\n return (\n\n \n \n {item.feedback.question} \n {item.feedback.feedback} \n\n\n {item.feedback.follow_up_question && item.feedback.follow_up_question.length>0?\n \n\n \n \n \n {categories.categories.find(f=>f.priority=='primary').options.find(f=>f.id==primary).name}\n \n \n\n \n {structure.dimensions[item.feedback.id?item.feedback.id:0].factors[item.feedback.factor].title} \n \n\n \n {getRisk(item.feedback.risk)}\n \n\n \n )\n }\n\n\t\t\t })}\n\n
\n\n \n {item.feedback.follow_up_question} \n {item.feedback.follow_up} \n
\n \n :\"\" \n \n }\n \n \n f.feedback.feedback).length / 10)}\n onPageChange={(e, { activePage }) => setPage(activePage)}\n size=\"mini\"\n />\n
\n\t\t\t \n\t\t\n Question \n setSelected(t.value)}\n value={selected}\n selection\n options={options}\n />\n
\n \n \n {language_hook('Feedback')} \n \n {\n is_french?\n categories?.categories.find((f) => f.priority == \"primary\")\n .fr:\n categories?.categories.find((f) => f.priority == \"primary\")\n .name\n }\n \n\n {language_hook('Risk')} \n\n Sentiment \n \n\n {calculated.slice((page - 1) * 10, page * 10).map((item, i) => {\n return (\n \n {item.text} \n\n \n \n \n \n\n {getRisk(item.risk)} \n\n \n 2\n ? \"#66D686\"\n : item.sentiment < -2\n ? \"#E66579\"\n : \"white\"\n }\n >\n {item.sentiment > 2\n ? language_hook('Positive')\n : item.sentiment < -2\n ? language_hook('Negative')\n : language_hook('Neutral')}\n \n \n \n );\n })}\n
\n \n
\n )}\n - `${p1}`).trim()\n }}>
`${p1}`).trim()\n }}>
;\n }\n });\n}\n\n const feedbackModal = (\n\n \n
\n\n\n\n \n setHoveredItem(`parent`)}\n onMouseLeave={() => setHoveredItem(\"\")}\n onClick={() => select(labels[0])}\n selected={selected?.title === labels[0].title}\n >\n \n
\n \n {parentLabels.map((item, i) => {\n const isHovered = hoveredItem === `dimension${i}`;\n const parentSelected =\n selected?.title === groupedLabels[item].title;\n const dimensionSelected = selected?.title === labels[0].title;\n\n if(item == 'Outcomes' && raw_feedback.filter(f=>f.type == 'outcome').length == 0){\n return ''\n }\n\n\n return (\n <>\n \n All culture factors \n Choose this option to include all of your culture data. \n\n
\n \n {(selected?.title === labels[0].title) && (\n \n 
*/}\n \n \n {factor.title} {data_points} data points \n \n {/* A culture where individuals feel they can speak up, express their ideas, and take risks without fear of punishment or humiliation. */}\n\n
\n \n {(isSelected || parentSelected) && (\n \n
\n )) ||\n (messages &&\n typeof messages === \"object\" &&\n Object.values(messages)?.length === 0 &&\n get_web_sock?.isConnected &&\n !getNewMessage(get_web_sock) && (\n \n {typeof isConnected === \"boolean\" &&\n !isConnected &&\n !hideInitial && (\n \n There has been an error in the connection, please\n refresh the page to reconnect\n \n )}\n
\n );\n })}\n {(get_web_sock?.isConnected &&\n get_web_sock?.data?.web_chat_id === selectedChatRoom?.id &&\n get_web_sock?.data?.message &&\n !get_web_sock?.data?.server?.response?.length > 0 &&\n Array.isArray(messages) &&\n messages?.length > 0 && (\n \n
\n )) ||\n (getPendingMessage(get_web_sock) && (\n \n
\n ))}\n \n {showScrollButton && !hideInitial && (\n Are you sure you want to delete this conversation?
\nPlease wait until the current response completes
\n\n Chatting with the following data: \n
\n\n \n \n {selectedChatRoom?.params?.factors?.title ||\n chatHistory?.params?.factors?.title}\n \n {getTags()}\n
\n \n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t<LegendIcon/>Long term pillar trends \n\t\t\t\n\t\t\t\t\t\tHistorical pillar scores with organization trends\n\t\t\t\t\t \n\t\t\t\t{loading?
\n\t\t\n \n Feedback \n \n {categories?.categories.find((f) => f.priority == \"primary\").name}\n \n\n Risk \n \n\n {feedback\n .map((item) => {\n let _data = item;\n _data.feedback.risk = get_risk(\n item.feedback.response,\n item.feedback.feedback\n );\n return _data;\n })\n .sort((a, b) => b.feedback.risk - a.feedback.risk)\n .slice((page - 1) * 10, page * 10)\n .map((item) => {\n let primary = item.categories.find(\n (f) => f.priority == \"primary\"\n ).response;\n\n if (\n (structure.dimensions.length == 1 && item.feedback.id != 1) ||\n structure.dimensions.length > 1\n ) {\n return (\n \n \n {item.feedback.question} \n {item.feedback.feedback} \n \n\n \n \n \n \n\n {getRisk(item.feedback.risk)} \n \n );\n }\n })}\n
\n\n \n\t\t\tInsights Scan \n\t\t\t
*/}\n\n\t\t\t\n\t\t\t\tsetChanges(d.checked)} label='Change metrics' style={{marginRight:30}}/>\n\t\t\t\tsetChecked(d.checked)} label='Pillar data' style={{marginRight:30}}/>\n\t\t\t\tsetLayers(d.checked?2:1)} label='2 Layers' style={{marginRight:30}}/>\n\t\t\t\tsetDemographics(d.checked)} label='Demographics'/>\n\t\t\t
\n\t\t\t\n{/*\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t */}\n\t\t\t\t\t\t{categories.categories.find(f=>f.id==item.category1).name}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t{item.option2?\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{categories.categories.find(f=>f.id==item.category2).name}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t:\"\"}\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t{/*\n setShowModal(true)}>\n {FilterIcon()}\n \n
\n \n\n \n setSelected(v)}\n language_hook={(w)=>language_hook.fetch_words(w)}\n />\n \n \n
\n \n\n \n \n {formErrors.length > 0 && !pristine &&\n *{error} : \"\"} */}\n \n \n `${option.organization_name} - ${option.name}`}\n getOptionValue={(option) => `${option.id}`}\n value={categorySelected}\n />\n \n\n \n \n setCategoryName(v.target.value)}\n />\n \n\n\n 0 && !pristine}\n onClick={onSubmit}>Create\n \n
\n \n )\n}\n\nexport default CopyCategory\n\n\nconst Container = styled.div`\n\t// margin-top:30px;\n\tfont-family: 'Red Hat Display', sans-serif;\n\t// padding:30px;\n\t// box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\twidth:400px;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n`\nconst Half = styled.div`\n\twidth:100%;\n\tpadding:30px 30px;\n`\n\nconst RowList = styled.div`\n display: flex;\n align-items: stretch; \n justify-content: flex-start;\n`\n\nconst ColorBlock = styled.div`\n\twidth:30px;\n\theight:30px;\n\tbackground-color:${props => props.color};\n\tcursor:pointer;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-bottom:30px;\n`\n\nconst Label = styled.div`\n\tmargin-bottom:10px;\n\tfont-weight:bold;\n`\n\nconst FormContainer = styled.div`\n width: 100%;\n\tmargin-top:20px;\n`\n\nconst FormContainerTop = styled.div`\n width: 100%;\n\tmargin-top:0px;\n`\n\nconst Submit = styled.button`\n\tborder-radius: 5px;\n background-color:${props => props.disable ? '#dcdcdc' : '#6a00ff'};\n font-size: 14px;\n font-weight: bold;\n color:white;\n padding: 10px;\n display:flex;\n align-items:center;\n justify-content:center;\n width:200px;\n margin-top:30px;\n cursor:${props => props.disable ? 'not-allowed' : 'pointer'};\n border:none;\n\n`\n","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { Message, Modal, Input, Button, List, Icon } from 'semantic-ui-react'\n\nimport { useDispatch } from \"react-redux\";\n\nimport {\n SG_ADD_SURVEY_STRUCTURE,\n} from \"constants/actions\";\n\n\n\nconst NewCategory = ({ organizationId, trigger }) => {\n const dispatch = useDispatch();\n const [pristine, setPristine] = useState(true)\n const [createCategory, setCreateCategory] = useState(false)\n\n const [formErrors, setFormErrors] = useState([]);\n const [categoryName, setCategoryName] = useState('');\n\n const onSubmit = () => {\n if (formErrors.length > 0) {\n setPristine(false)\n return\n }\n setPristine(true)\n dispatch({\n type: SG_ADD_SURVEY_STRUCTURE,\n payload: {\n organization: organizationId,\n name: categoryName,\n },\n });\n setCreateCategory(false)\n }\n\n // console.log(rowId)\n // console.log(surveyStruc)\n\n useEffect(() => {\n const ErrorList = []\n\n if (!categoryName) {\n ErrorList.push(\"Enter a Name\")\n }\n if (!organizationId) {\n ErrorList.push(\"No Organization Found\")\n }\n\n setFormErrors(ErrorList)\n }, [categoryName, pristine, organizationId]);\n\n\n return (\n \n \n {formErrors.length > 0 && !pristine &&\n *{error} : \"\"} */}\n\n\n \n \n setCategoryName(v.target.value)}\n />\n \n\n\n 0 && !pristine}\n onClick={onSubmit}>Create\n \n
\n \n )\n}\n\nexport default NewCategory\n\n\nconst Container = styled.div`\n\t// margin-top:30px;\n\tfont-family: 'Red Hat Display', sans-serif;\n\t// padding:30px;\n\t// box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\twidth:400px;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n`\nconst Half = styled.div`\n\twidth:100%;\n\tpadding:30px 30px;\n`\n\nconst RowList = styled.div`\n display: flex;\n align-items: stretch; \n justify-content: flex-start;\n`\n\nconst ColorBlock = styled.div`\n\twidth:30px;\n\theight:30px;\n\tbackground-color:${props => props.color};\n\tcursor:pointer;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-bottom:30px;\n`\n\nconst Label = styled.div`\n\tmargin-bottom:10px;\n\tfont-weight:bold;\n`\n\nconst FormContainer = styled.div`\n width: 100%;\n\tmargin-top:20px;\n`\n\nconst FormContainerTop = styled.div`\n width: 100%;\n\tmargin-top:0px;\n`\n\nconst Submit = styled.button`\n\tborder-radius: 5px;\n background-color:${props => props.disable ? '#dcdcdc' : '#6a00ff'};\n font-size: 14px;\n font-weight: bold;\n color:white;\n padding: 10px;\n display:flex;\n align-items:center;\n justify-content:center;\n width:200px;\n margin-top:30px;\n cursor:${props => props.disable ? 'not-allowed' : 'pointer'};\n border:none;\n\n`\n","import React, { useState, useEffect } from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport { SketchPicker } from 'react-color';\nimport ClickAwayListener from \"react-click-away-listener\";\n\n\nconst ColorPicker = ({ color, setColor }) => {\n\n\tconst [open, setOpen] = useState(false)\n\n\n\treturn (\n\t\t\n\t\t\t setOpen(false)}>\n\t\t\t\t setOpen(!open)}>\n\n\t\t\t\t \n\n\t\t\t\t\n\t\t\t\t\t setColor(c)}\n\t\t\t\t\t/>\n\t\t\t\t \n\t\t\t \n\t\t
\n\t)\n}\n\n\nexport default ColorPicker\n\nconst ColorBlock = styled.div`\n\twidth:40px;\n\theight:40px;\n\tbackground-color:${props => props.color};\n\tcursor:pointer;\n`\n\nconst Container = styled.div`\n\tposition:absolute;\n\tleft:0;\n\tbottom:10px;\n\tdisplay:${props => props.open ? 'flex' : 'none'};\n`","import styled from \"styled-components\";\nimport React, { useEffect, useState } from \"react\";\nimport { v4 as uuidv4 } from 'uuid';\nimport { Message, Modal, Input, Button, List, Icon } from 'semantic-ui-react'\n\nimport Select from \"react-select\";\nimport ColorPicker from './ColorPicker'\n\nimport { useDispatch } from \"react-redux\";\n\nimport {\n SG_EDIT_SURVEY_STRUCTURE\n } from \"constants/actions\";\n\nconst PriorityList = [\n { value: 'primary', label: \"Primary\" },\n { value: 'secondary', label: \"Secondary\" },\n { value: 'tertiary', label: \"Tertiary\" },\n]\n\nfunction stringToHexColor(str, s, l) {\n var hash = 0;\n for (var i = 0; i < str?.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n var h = hash % 360;\n return hslToHex(h, s, l);\n}\n\nfunction hslToHex(h, s, l) {\n l /= 100;\n const a = s * Math.min(l, 1 - l) / 100;\n const f = n => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix \"0\" if needed\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n}\n\nconst NewCategory = (props) => {\n\n const { rowId,\n trigger,\n surveyStruc, setSurveyStruc,\n surveyStrucRow,\n setSurveyStrucRow,\n openNewCategory,\n setOpenNewCategory,\n organizationId,\n surveyStructureId } = props\n\n const dispatch = useDispatch();\n\n const [pristine, setPristine] = useState(true)\n const [listName, setListName] = useState('')\n // const [open, setOpen] = useState(false)\n const [updated, setUpdated] = useState(false)\n const [color, setColor] = useState('#BCBCBC')\n const [formErrors, setFormErrors] = useState([]);\n\n const onSubmit = () => {\n if (formErrors.length > 0) {\n setPristine(false)\n return\n }\n setPristine(true)\n setOpenNewCategory(false)\n // const _strucRows = []\n let NewRow = []\n const _strucRow = []\n if (rowId) {\n surveyStrucRow.filter(st => st?.id !== rowId).map(sl => {\n return _strucRow.push({id: uuidv4(), ...sl})\n })\n _strucRow.push(surveyStruc)\n NewRow = _strucRow\n setSurveyStrucRow(_strucRow)\n } else {\n if (surveyStrucRow?.length > 0) {\n surveyStrucRow.map(sl => {\n return _strucRow.push({id: uuidv4(), ...sl})\n })\n // console.log(\"Add Rows\")\n _strucRow.push({\n \"id\": uuidv4(),\n \"subfactors\": [],\n ...surveyStruc\n })\n NewRow = _strucRow\n setSurveyStrucRow(_strucRow)\n } else {\n // console.log(\"New Rows\")\n NewRow = [\n {\n \"id\": uuidv4(),\n \"subfactors\": [],\n ...surveyStruc\n }]\n setSurveyStrucRow(NewRow)\n }\n }\n\n dispatch({\n\t\t\ttype: SG_EDIT_SURVEY_STRUCTURE,\n\t\t\tpayload: {\n id: surveyStructureId,\n\t\t\t organization: organizationId,\n\t\t\t categories: NewRow,\n\t\t\t},\n\t\t });\n setSurveyStruc({})\n\n }\n\n // console.log(rowId)\n // console.log(surveyStruc)\n\n useEffect(() => {\n const ErrorList = []\n if (!surveyStruc?.priority) {\n ErrorList.push(\"Select a Priority\")\n }\n if (!surveyStruc?.name) {\n ErrorList.push(\"Enter a Name\")\n }\n if (!surveyStruc?.subtitle) {\n ErrorList.push(\"Enter a Subtitle\")\n }\n // if (!surveyStruc?.category) {\n // ErrorList.push(\"Enter a category\")\n // }\n // if (!surveyStruc?.color) {\n // ErrorList.push(\"Select a Color\")\n // }\n if (!surveyStruc?.options || surveyStruc?.options?.length === 0) {\n ErrorList.push(\"Add atleast one option\")\n }\n setFormErrors(ErrorList)\n }, [surveyStruc, updated]);\n\n function reset() {\n setOpenNewCategory(false)\n }\n function AddToList() {\n const _survey = surveyStruc\n const _options = _survey?.options ? _survey?.options : []\n\n if (listName.length > 0) {\n if (!_options.find(({ name }) => name === listName)) {\n _options.push({\n id: uuidv4(),\n name: listName,\n color: color\n })\n }\n }\n _survey.options = _options\n setSurveyStruc(_survey)\n setListName('')\n setUpdated(Math.random())\n }\n\n function RemoveFromList(key) {\n// \"Winter Sports\" \"Summer Sports\"\n const RemoveName = surveyStruc?.options[key]?.name\n let ChangedSubFactor = false\n let SubFactors = surveyStruc?.subfactors\n if (SubFactors?.length > 0) {\n const SubFactorFound = SubFactors.filter(ss => ss.option === RemoveName)\n if (SubFactorFound?.length > 0) {\n // remove subfactors\n SubFactors = SubFactors.filter(ss => ss.option !== RemoveName)\n ChangedSubFactor = true\n }\n }\n // console.log(SubFactors)\n const _survey = surveyStruc\n const _options = surveyStruc?.options\n\n _options.splice(key, 1)\n _survey[\"options\"] = _options\n if (ChangedSubFactor) {\n _survey['subfactors'] = SubFactors\n }\n // console.log(_survey)\n\n setSurveyStruc(_survey)\n const ErrorList = formErrors\n if (!_survey?.options && _survey?.options?.length === 0) {\n ErrorList.push(\"Add atleast one option\")\n }\n setFormErrors(ErrorList)\n setUpdated(Math.random())\n }\n\n function AddDetails(name, value) {\n const _survey = surveyStruc\n _survey[name] = value\n setSurveyStruc(_survey)\n setUpdated(Math.random())\n }\n\n function UpdatedOptionList(e) {\n setListName(e.target.value)\n // const color = stringToHexColor(e.target.value, 50, 60)\n // console.log(color)\n setColor(stringToHexColor(e.target.value, 50, 60))\n }\n\n return (\n \n \n {formErrors.length > 0 && !pristine &&\n *{error} : \"\"} */}\n \n\n\n \n\n \n \n AddDetails(\"priority\", e.value)}\n value={PriorityList.find(({ value }) => value === surveyStruc?.priority)}\n options={PriorityList}\n />\n \n\n \n \n AddDetails(\"name\", v.target.value)}\n />\n \n\n \n \n AddDetails(\"subtitle\", v.target.value)}\n value={surveyStruc?.subtitle}\n />\n \n\n \n \n AddDetails(\"question\", v.target.value)}\n value={surveyStruc?.question || ''}\n />\n \n\n \n \n setColor(c.hex)}\n />\n \n \n \n\n 0 && !pristine}\n onClick={onSubmit}>{rowId ? \"update\" : \"Create\"}\n \n
\n \n )\n}\n\nexport default NewCategory\n\n\nconst Container = styled.div`\n\t// margin-top:30px;\n\tfont-family: 'Red Hat Display', sans-serif;\n\t// padding:30px;\n\t// box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n\twidth:400px;\n\tdisplay:flex;\n\talign-items:center;\n\tflex-direction:column;\n`\nconst Half = styled.div`\n\twidth:100%;\n\tpadding:30px 30px;\n`\n\nconst RowList = styled.div`\n display: flex;\n align-items: stretch; \n justify-content: flex-start;\n`\n\nconst ColorBlock = styled.div`\n\twidth:30px;\n\theight:30px;\n\tbackground-color:${props => props.color};\n\tcursor:pointer;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-bottom:30px;\n`\n\nconst Label = styled.div`\n\tmargin-bottom:10px;\n\tfont-weight:bold;\n`\n\nconst FormContainer = styled.div`\n width: 100%;\n\tmargin-top:20px;\n`\n\nconst FormContainerTop = styled.div`\n width: 100%;\n\tmargin-top:0px;\n`\n\nconst Submit = styled.button`\n\tborder-radius: 5px;\n background-color:${props => props.disable ? '#dcdcdc' : '#6a00ff'};\n font-size: 14px;\n font-weight: bold;\n color:white;\n padding: 10px;\n display:flex;\n align-items:center;\n justify-content:center;\n width:200px;\n margin-top:30px;\n cursor:${props => props.disable ? 'not-allowed' : 'pointer'};\n border:none;\n\n`\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Message, Icon, Table, Form, Header } from 'semantic-ui-react'\n\nimport Select from \"react-select\";\n\nfunction Summary(props) {\n const { surveyStrucRow, surveyStructure } = props\n\n const [errorList, setErrorList] = useState([])\n const [primaryRow, setPrimaryRow] = useState([])\n const [secondaryRow, setSecondaryRow] = useState({})\n const [tertiaryRow, setTertiaryRow] = useState([])\n\n const [fieldMap, setFieldMap] = useState([])\n const [fieldNames, setFieldNames] = useState([])\n // const [validFields, setValidFields] = useState([])\n const [showExtra, setShowExtra] = useState(false)\n const [questions, setQuestion] = useState([])\n\n\n useEffect(() => {\n // const _primaryList = [];\n // const _secondaryList = [];\n if (surveyStructure?.length > 0) {\n setFieldMap(surveyStructure?.[0]?.field_map)\n setQuestion(surveyStructure?.[0]?.survey_questions)\n setFieldNames(surveyStructure?.[0]?.field_map?.field_name)\n // setValidFields(surveyStructure?.[0]?.field_map?.valid_fields)\n }\n }, [surveyStructure]);\n\n useEffect(() => {\n if (surveyStrucRow) {\n // check for the following\n const _PrimaryRow = []\n const _SecondaryRow = []\n const _TertiaryRow = []\n // one primary exists\n const ErrorMessage = []\n let PrimaryFound = false\n let SecondaryFound = false\n surveyStrucRow.map(row => {\n\n if (row.priority !== \"primary\" && !PrimaryFound) {\n PrimaryFound = true\n\n }\n if (row.priority === \"primary\") {\n _PrimaryRow.push(row)\n }\n if (row.priority !== \"secondary\" && !SecondaryFound) {\n SecondaryFound = true\n\n }\n if (row.priority === \"secondary\") {\n _SecondaryRow.push(row)\n }\n if (row.priority === \"tertiary\") {\n _TertiaryRow.push(row)\n }\n return null\n })\n\n if (!PrimaryFound) {\n ErrorMessage.push(\"No row with Priority Primary Found, atleast one row with Priority Primary is essenstial\")\n }\n if (!SecondaryFound) {\n ErrorMessage.push(\"No row with Priority Secondary Found, atleast one row with Priority Secondary is essenstial\")\n }\n // one secondary exists\n // console.log(ErrorMessage)\n setPrimaryRow(_PrimaryRow)\n setSecondaryRow(_SecondaryRow)\n setTertiaryRow(_TertiaryRow)\n\n setErrorList(ErrorMessage)\n }\n }, [surveyStrucRow]);\n\n\n\n function ShowMoreInfo(inx) {\n if (showExtra === inx) {\n setShowExtra(null)\n } else {\n setShowExtra(inx)\n }\n\n }\n // console.log(showExtra)\n\n return (\n <>\n {errorList && errorList.length > 0 && - \n {surveyStruc?.options?.length > 0 &&\n surveyStruc?.options.map((item, key) => {\n return (\n
\n \n \n \n SelectedOption(e.label)}\n value={optionHead.find(({ label }) => label === selectedOption)}\n options={optionHead}\n />\n \n {selectedOption &&\n <>\n \n \n setColor(c.hex)}\n />\n \n \n \n \n }\n \n
\n\n\n \n )\n}\n\nexport default NewSubFactors\n\n\nconst StyledButton = styled.button`\n background-color: #6a00ff;\n color: white;\n font-size: 14px;\n font-family: \"Red Hat Display\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 7px 7px 7px 18px;\n border: none;\n outline: none;\n// margin-top:30px;\n \n @media (max-width: 768px) {\n height: 30px;\n font-size: 12px;\n padding: 0 10px 0 10px;\n }\n`;\n\nconst Half = styled.div`\n\twidth:100%;\n\tpadding:30px 30px;\n`\n\nconst RowList = styled.div`\n display: flex;\n align-items: stretch; \n justify-content: flex-start;\n`\n\nconst ColorBlock = styled.div`\n\twidth:30px;\n\theight:30px;\n\tbackground-color:${props => props.color};\n\tcursor:pointer;\n`\n\nconst Title = styled.div`\n\tfont-size:26px;\n\tfont-weight:bold;\n\tmargin-bottom:30px;\n`\n\nconst Label = styled.div`\n\tmargin-bottom:10px;\n\tfont-weight:bold;\n`\n\nconst FormContainer = styled.div`\n width: 100%;\n\tmargin-top:20px;\n`\n\nconst FormContainerTop = styled.div`\n width: 100%;\n\tmargin-top:0px;\n`\n\nconst Submit = styled.button`\n\tborder-radius: 5px;\n background-color:${props => props.disable ? '#dcdcdc' : '#6a00ff'};\n font-size: 14px;\n font-weight: bold;\n color:white;\n padding: 10px;\n display:flex;\n align-items:center;\n justify-content:center;\n width:200px;\n margin-top:30px;\n cursor:${props => props.disable ? 'not-allowed' : 'pointer'};\n border:none;\n\n`\n","import React, { useState } from \"react\";\nimport {\n Table,\n Button,\n Portal,\n Segment,\n Header,\n Modal,\n Image,\n Icon,\n} from \"semantic-ui-react\";\nimport styled from \"styled-components\";\n// import NewSubFactor from './NewSubFactor'\nimport NewSubFactorPortal from \"./NewSubFactorPortal\";\n\nconst ListJson = ({\n surveyStrucRow,\n setRowId,\n setOpenNewCategory,\n setSurveyStruc,\n setSurveyStrucRow,\n}) => {\n const [openSubFactor, setOpenSubFactor] = useState(false);\n const [selectedItem, setSelectedItem] = useState(false);\n\n function SelectRow(item) {\n setRowId(item?.id);\n setOpenNewCategory(true);\n setSurveyStruc(item);\n }\n\n function SelectSubFactorRow(item) {\n // console.log(item.id)\n setRowId(item?.id);\n\n setSurveyStruc(item);\n setOpenSubFactor(true);\n setSelectedItem(item);\n }\n\n return (\n <>\n - \n {subFactor?.options?.length > 0 &&\n subFactor?.options.map((item, key) => {\n return (\n
\n There are no action plans currently created. Please create a plan.\n
\n\n\t\t\t\t\n\t\t\t\t\t{metrics\n\t\t\t\t\t\t.filter((f) => f.type == \"People\")\n\t\t\t\t\t\t.map((i) => (\n\t\t\t\t\t\t\t update(i.id)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t{metrics\n\t\t\t\t\t\t.filter((f) => f.type == \"Performance\")\n\t\t\t\t\t\t.map((i) => (\n\t\t\t\t\t\t\t update(i.id)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t \n\t\t\t
\n\t\t| Questions | \n\t\t\t\t\tScore | \n\t\t\t\t\tActions | \n\t\t\t\t
|---|
{question}\n\t\t\t
\n\t\t\t\t\tWhy is this a meaningful measure to improve? What are the\n\t\t\t\t\tbenefits of improving in this culture area?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tWhat do you predict is going to happen if this doesn’t\n\t\t\t\t\tchange? What is the cost of not improving in this area?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tWhat do you believe may be leading to the current level of\n\t\t\t\t\tperformance in this area within your culture?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tList up to 3 strategies or behaviors that will be\n\t\t\t\t\timplemented, introduced, or changed in your environment to\n\t\t\t\t\timprove this culture area. Also identify who will be\n\t\t\t\t\tresponsible for leading each item (person, people, or\n\t\t\t\t\tgroups):{\" \"}\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\tWhy is this a meaningful measure to improve? What are the\n\t\t\t\t\tbenefits of improving in this culture area?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tWhat do you predict is going to happen if this doesn’t\n\t\t\t\t\tchange? What is the cost of not improving in this area?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tWhat do you believe may be leading to the current level of\n\t\t\t\t\tperformance in this area within your culture?\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\tList up to 3 strategies or behaviors that will be\n\t\t\t\t\timplemented, introduced, or changed in your environment to\n\t\t\t\t\timprove this culture area. Also identify who will be\n\t\t\t\t\tresponsible for leading each item (person, people, or\n\t\t\t\t\tgroups):{\" \"}\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t \n\n\t\t\t\t\t\n\t\t\t\t\t\t \n\n\t\t\t\t\t\n\t\t\t\t\t\t \n\n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{data.metric.type}: {data.metric.title}\n\t\t\t\t\t \n\t\t\t\t\t{data.question} \n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tOutcome measures by school year\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\tSelected time frame \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tThe time frame you selected for a change in this\n\t\t\t\t\t\t\t\tarea.{\" \"}\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\tChange over time frame \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tThe overall change in scores in this area was\n\t\t\t\t\t\t\t\t15%. This is a very large difference.\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\tGroup differences \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tThere was a significant group difference between\n\t\t\t\t\t\t\t\t1st years and 4th years in response to this\n\t\t\t\t\t\t\t\tparticular intervention\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t{question.question}\n {question.inputFields.map((field, f) => {\n // Show or hide title if it exists.\n const showTitle = field.title.length > 0 && (\n
\n \n handleDatesSelected(date, i, f, 4)\n }\n {...props}\n date={\n props.data?.planData?.[id]?.[f]?.[i]?.[4] || null\n }\n />\n
\n \n\n \n \n s?.value ===\n props.data?.planData?.[id]?.[f]?.[i]?.[5]\n )?.text || \"\"\n }\n setStatus={(d) => handleStatusChange(d, i, f, 5)}\n editEnabled={editEnabled}\n />\n
\n \n {(editEnabled && (\n handleInputChange(d, i, f, 5)}\n placeholder=\"Enter budget\"\n hideFocus={true}\n editEnabled={editEnabled}\n />\n )) || (\n \n {props.data?.planData?.[id]?.[f]?.[i]?.[5] || \"\"}\n \n )}\n
\n \n \n \n handleDatesSelected(date, i, f, 6)\n }\n {...props}\n date={\n props.data?.planData?.[id]?.[f]?.[i]?.[6] || null\n }\n />\n
\n \n\n \n \n s?.value ===\n props.data?.planData?.[id]?.[f]?.[i]?.[7]\n )?.text || \"\"\n }\n setStatus={(d) => handleStatusChange(d, i, f, 7)}\n editEnabled={editEnabled}\n />\n
\n \n {\n if (selected > 0) {\n if (planningPage > 0 && selected === 1) {\n setPlanningPage(planningPage - 1);\n } else {\n setSelected(selected - 1);\n }\n }\n }}\n >\n Back\n \n next()}\n >\n {(!isNaN(selectedPlan) &&\n planningPage >=\n planningTemplates[selectedPlan].template?.length - 1) ||\n selected === 2\n ? \"Save\"\n : \"Continue\"}\n \n
\n {question.question}\n {question.inputFields.map((field, f) => {\n // Show or hide title if it exists.\n const showTitle = field.title.length > 0 && (\n
\n \n {TeamIcon(\"#9E9FA1\")} \n {getPrimary(data.primary)} \n \n \n \n
\n Next page
} */}\n\n {tab === \"Details\" && (\n \n {\n close();\n }}\n >\n {CloseIcon()}\n Close\n \n
\n