import React, { ReactElement, useEffect } from 'react'; import Head from 'next/head'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import dayjs from 'dayjs'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import { fetch } from '../../stores/organizations/organizationsSlice'; import { saveFile } from '../../helpers/fileSaver'; import dataFormatter from '../../helpers/dataFormatter'; import ImageField from '../../components/ImageField'; import LayoutAuthenticated from '../../layouts/Authenticated'; import { getPageTitle } from '../../config'; import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; import SectionMain from '../../components/SectionMain'; import CardBox from '../../components/CardBox'; import BaseButton from '../../components/BaseButton'; import BaseDivider from '../../components/BaseDivider'; import { mdiChartTimelineVariant } from '@mdi/js'; import { SwitchField } from '../../components/SwitchField'; import FormField from '../../components/FormField'; import { hasPermission } from '../../helpers/userPermissions'; const OrganizationsView = () => { const router = useRouter(); const dispatch = useAppDispatch(); const { organizations } = useAppSelector((state) => state.organizations); const { currentUser } = useAppSelector((state) => state.auth); const { id } = router.query; function removeLastCharacter(str) { console.log(str, `str`); return str.slice(0, -1); } useEffect(() => { dispatch(fetch({ id })); }, [dispatch, id]); return ( <> {getPageTitle('View organizations')}

Name

{organizations?.name}

Logo url

{organizations?.logo_url}

Primary color

{organizations?.primary_color}

Secondary color

{organizations?.secondary_color}

<>

Users Organizations

{organizations.users_organizations && Array.isArray(organizations.users_organizations) && organizations.users_organizations.map((item: any) => ( router.push(`/users/users-view/?id=${item.id}`) } > ))}
First Name Last Name Phone Number E-Mail Disabled
{item.firstName} {item.lastName} {item.phoneNumber} {item.email} {dataFormatter.booleanFormatter(item.disabled)}
{!organizations?.users_organizations?.length && (
No data
)} <>

Actions organizations

{organizations.actions_organizations && Array.isArray(organizations.actions_organizations) && organizations.actions_organizations.map((item: any) => ( router.push(`/actions/actions-view/?id=${item.id}`) } > ))}
DueDate Status
{dataFormatter.dateTimeFormatter(item.due_date)} {item.status}
{!organizations?.actions_organizations?.length && (
No data
)} <>

Branches organizations

{organizations.branches_organizations && Array.isArray(organizations.branches_organizations) && organizations.branches_organizations.map((item: any) => ( router.push( `/branches/branches-view/?id=${item.id}`, ) } > ))}
Name Location
{item.name} {item.location}
{!organizations?.branches_organizations?.length && (
No data
)} <>

Checklists organizations

{organizations.checklists_organizations && Array.isArray(organizations.checklists_organizations) && organizations.checklists_organizations.map( (item: any) => ( router.push( `/checklists/checklists-view/?id=${item.id}`, ) } > ), )}
Title
{item.title}
{!organizations?.checklists_organizations?.length && (
No data
)} <>

Events organizations

{organizations.events_organizations && Array.isArray(organizations.events_organizations) && organizations.events_organizations.map((item: any) => ( router.push(`/events/events-view/?id=${item.id}`) } > ))}
EventType EventDate Status RiskLevel
{item.event_type} {dataFormatter.dateTimeFormatter(item.event_date)} {item.status} {item.risk_level}
{!organizations?.events_organizations?.length && (
No data
)} <>

Inspections organizations

{organizations.inspections_organizations && Array.isArray(organizations.inspections_organizations) && organizations.inspections_organizations.map( (item: any) => ( router.push( `/inspections/inspections-view/?id=${item.id}`, ) } > ), )}
CompletionDate Score
{dataFormatter.dateTimeFormatter( item.completion_date, )} {item.score}
{!organizations?.inspections_organizations?.length && (
No data
)} router.push('/organizations/organizations-list')} /> ); }; OrganizationsView.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default OrganizationsView;