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/properties/propertiesSlice'; 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 PropertiesView = () => { const router = useRouter(); const dispatch = useAppDispatch(); const { properties } = useAppSelector((state) => state.properties); 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 properties')}

Address

{properties?.address}

PropertyType

{properties?.property_type}

<>

Appraisals

{properties.appraisals && Array.isArray(properties.appraisals) && properties.appraisals.map((item: any) => ( router.push( `/appraisals/appraisals-view/?id=${item.id}`, ) } > ))}
AcceptedDate DeliveryDate Status Fee
{dataFormatter.dateTimeFormatter( item.accepted_date, )} {dataFormatter.dateTimeFormatter( item.delivery_date, )} {item.status} {item.fee}
{!properties?.appraisals?.length && (
No data
)}

organizations

{properties?.organizations?.name ?? 'No data'}

<>

Appraisals Property

{properties.appraisals_property && Array.isArray(properties.appraisals_property) && properties.appraisals_property.map((item: any) => ( router.push( `/appraisals/appraisals-view/?id=${item.id}`, ) } > ))}
AcceptedDate DeliveryDate Status Fee
{dataFormatter.dateTimeFormatter( item.accepted_date, )} {dataFormatter.dateTimeFormatter( item.delivery_date, )} {item.status} {item.fee}
{!properties?.appraisals_property?.length && (
No data
)} <>

Orders Property

{properties.orders_property && Array.isArray(properties.orders_property) && properties.orders_property.map((item: any) => ( router.push(`/orders/orders-view/?id=${item.id}`) } > ))}
RequestedDate Status Fee
{dataFormatter.dateTimeFormatter( item.requested_date, )} {item.status} {item.fee}
{!properties?.orders_property?.length && (
No data
)} router.push('/properties/properties-list')} /> ); }; PropertiesView.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default PropertiesView;