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

ProjectName

{projects?.name}

ProjectCode

{projects?.code}

ProjectType

{projects?.type ?? 'No data'}

{hasPermission(currentUser, 'READ_ORGANIZATIONS') && (

Organization

{projects?.organization?.name ?? 'No data'}

)}

organizations

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

<>

Documents Project

{projects.documents_project && Array.isArray(projects.documents_project) && projects.documents_project.map((item: any) => ( router.push( `/documents/documents-view/?id=${item.id}`, ) } > ))}
DocumentNumber DocumentType PreparedBy Status CashBalance PaymentDate Amount ShelfNumber ApprovedBy
{item.document_number} {item.document_type} {item.prepared_by} {item.status} {dataFormatter.booleanFormatter(item.cash_balance)} {dataFormatter.dateTimeFormatter(item.payment_date)} {item.amount} {item.shelf_number} {item.approved_by}
{!projects?.documents_project?.length && (
No data
)} <>

Field_site_payment_requisitions Project

{projects.field_site_payment_requisitions_project && Array.isArray( projects.field_site_payment_requisitions_project, ) && projects.field_site_payment_requisitions_project.map( (item: any) => ( router.push( `/field_site_payment_requisitions/field_site_payment_requisitions-view/?id=${item.id}`, ) } > ), )}
Department EmployeeName DeparturePlace DepartureDate ArrivalPlace ReturnDate RequisitionDate RequestedAmount PaymentType Status Requester Approver DueDate
{item.department} {item.employee_name} {item.departure_place} {dataFormatter.dateTimeFormatter( item.departure_date, )} {item.arrival_place} {dataFormatter.dateTimeFormatter( item.return_date, )} {dataFormatter.dateTimeFormatter( item.requisition_date, )} {item.requested_amount} {item.payment_type} {item.status} {item.requester} {item.approver} {dataFormatter.dateTimeFormatter(item.due_date)}
{!projects?.field_site_payment_requisitions_project?.length && (
No data
)} router.push('/projects/projects-list')} /> ); }; ProjectsView.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default ProjectsView;