${\n item.user ? '' : ''\n } ${startCase(item.firstName)} ${startCase(item.lastName)}
\n ${\n item.user\n ? `\\n
${(item.user.roles as string[])\n .map(item => toTitleCase(item, '_'))\n .join(', ')}
`\n : ''\n }\\n
${item.employeeNumber} - ${toTitleCase(\n item.department?.name || 'No Department',\n ' ',\n )}
`,\n };\n }\n return null;\n })\n .filter(e => e),\n );\n })\n .catch((error: Error) => {\n reject(error);\n });\n }\n //gets all employees\n });\n });\n }\n };\n\n const fetchTreeData = (): void => {\n setloading(true);\n\n loadEmployees()\n .then((employees: Employee[]) => {\n if (employees.length > 0) {\n //ErrorHandling\n //@ts-ignore\n if (employees.filter(el => !el.parentNodeId).length <= 0) {\n setState(oldState => ({ ...oldState, tree: [], error: 'No top of reporting line selected' }));\n } else {\n setState(oldState => ({ ...oldState, tree: employees }));\n }\n } else {\n setState(oldState => ({ ...oldState, tree: [], error: 'No employee' }));\n }\n\n setloading(false);\n })\n .catch(error => {\n handleError(error);\n setloading(false);\n });\n };\n\n useEffect(() => {\n if (!state.tree) {\n fetchTreeData();\n }\n }, []);\n\n const onNodeClick = (nodeId: string): void => {\n let childrenIds: CombinedEmployee[] = [];\n setSelectedEmployee(null);\n setloading(true);\n const employee = employees.filter(el => el.id === nodeId)[0];\n const locateChildren = (id: string): void => {\n const employeesChildren = employees.filter((el: Employee) => el.directManagerID === id);\n if (employeesChildren.length > 0) {\n employeesChildren.forEach(element => locateChildren(element.id));\n }\n childrenIds = [...childrenIds, ...employeesChildren];\n };\n\n if (employee) {\n const canAccess = employees.filter((el: Employee) => el.allocatedManagerID === nodeId);\n locateChildren(employee.id);\n setHighligthIds([...canAccess, ...childrenIds]);\n setSelectedEmployee(employee);\n setloading(false);\n }\n };\n\n const searchEmployee = (name: string): void => {\n let results: CombinedEmployee[] = [];\n if (employees) {\n const cleanedName = name.toLowerCase();\n results = employees.filter(employee => {\n return (\n employee.firstName.includes(cleanedName) ||\n employee.lastName.includes(cleanedName) ||\n employee.employeeNumber.includes(cleanedName)\n );\n });\n }\n setResults(results);\n };\n\n if (highligthIds.length && chart) {\n //@ts-ignore\n chart.explodeOrContract(highligthIds.length);\n }\n\n if (!loading && !state.error && state.tree && state.tree.length <= 1) {\n return (\n }){kind=logo}
\n