import React, { ReactElement } from 'react';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { fetch } from '../../stores/budget_reallocations/budget_reallocationsSlice';
import EntityRecordViewPage from '../../components/EntityPage/EntityRecordViewPage';

const BudgetReallocationsView = () => (
  <EntityRecordViewPage
    singularLabel="Budget Reallocation"
    pluralLabel="Budget Reallocations"
    stateKey="budget_reallocations"
    recordKey="budget_reallocations"
    fetchRecord={fetch}
    listHref="/budget_reallocations/budget_reallocations-list"
    editHref={(id) => `/budget_reallocations/budget_reallocations-edit/?id=${id ?? ''}`}
  />
);

BudgetReallocationsView.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated permission={'READ_BUDGET_REALLOCATIONS'}>{page}</LayoutAuthenticated>;
};

export default BudgetReallocationsView;
