import React, { ReactElement, useEffect } from 'react'; import Head from 'next/head'; import { mdiHomeCity } from '@mdi/js'; import { useRouter } from 'next/router'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { fetch } from '../../stores/properties/propertiesSlice'; 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 BaseButtons from '../../components/BaseButtons'; import { hasPermission } from '../../helpers/userPermissions'; type StatProps = { label: string; value: string | number; hint?: string; }; type RelatedListProps = { title: string; items: any[]; getLabel: (item: any) => string; emptyLabel?: string; }; const DetailStat = ({ label, value, hint }: StatProps) => (

{label}

{value}

{hint &&

{hint}

}
); const DetailRow = ({ label, value }: { label: string; value?: React.ReactNode }) => (

{label}

{value || 'Not set'}
); const RelatedList = ({ title, items, getLabel, emptyLabel = 'No items yet' }: RelatedListProps) => (

{title}

{items.length}
{items.length ? (
{items.slice(0, 4).map((item: any) => (
{getLabel(item)}
))} {items.length > 4 && (

+{items.length - 4} more

)}
) : (

{emptyLabel}

)}
); const PropertiesView = () => { const router = useRouter(); const dispatch = useAppDispatch(); const { properties } = useAppSelector((state) => state.properties); const { currentUser } = useAppSelector((state) => state.auth); const { id } = router.query; useEffect(() => { dispatch(fetch({ id })); }, [dispatch, id]); const canEdit = currentUser && hasPermission(currentUser, 'UPDATE_PROPERTIES'); const unitsCount = Array.isArray(properties?.units) ? properties.units.length : 0; const unitTypesCount = Array.isArray(properties?.unit_types) ? properties.unit_types.length : 0; const amenitiesCount = Array.isArray(properties?.amenities) ? properties.amenities.length : 0; return ( <> {getPageTitle('Property')} {canEdit && }

Overview

Property profile

The location, operating status, and core identifying information for the property.

Description

What makes this property unique

{properties?.description ? (
) : (

No property description has been added yet.

)}

Gallery

Property imagery

{Array.isArray(properties?.images) && properties.images.length ? ( ) : (

No images uploaded yet.

)}

Related Records

Inventory and demand

item?.name || item?.id} /> item?.name || item?.code || item?.id} /> item?.name || item?.unit_number || item?.id} /> item?.name || item?.id} /> item?.reservation_code || item?.status || item?.id} />
); }; PropertiesView.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default PropertiesView;