relatedParties legal entity

import { Box, Button, Typography } from '@mui/material';
import { DataGrid, GridActionsCellItem, GridColumns } from '@mui/x-data-grid';
import { Icon } from '@iconify/react';
import { partiesMock } from '../common/mocks/clients';
import { Party } from '../common/types/client';

const Parties = () => {
  const columns: GridColumns<Party> = [
    {
      field: 'name',
      headerName: 'Name',
      flex: 1,
      renderCell: ({ row }) => (
        <Typography fontWeight={500} variant="body1">
          {row.name}
        </Typography>
      ),
    },
    { field: 'taxStatus', headerName: 'Tax status', flex: 1 },
    { field: 'regNumber', headerName: 'ID number or registration', flex: 1 },
    { field: 'date', headerName: 'Date of birth or registration', flex: 1 },
    {
      field: 'actions',
      type: 'actions',
      getActions: () => [
        <GridActionsCellItem
          key="delete"
          icon={<Icon width={20} icon="uil:trash" />}
          label="Delete"
        />,
        <GridActionsCellItem
          key="edit"
          color="primary"
          icon={<Icon width={20} icon="uil:edit-alt" />}
          label="Print"
        />,
      ],
    },
  ];
  return (
    <>
      <Typography pt={4} pb={5} width="50%" color="text.secondary">
        Instructional text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </Typography>
      <Box display="flex" justifyContent="flex-end">
        <Button variant="outlined" color="primary">
          Add related party
        </Button>
      </Box>
      <DataGrid
        sx={{ mt: 3 }}
        autoHeight
        disableSelectionOnClick
        rows={partiesMock}
        columns={columns}
        hideFooter
        disableColumnMenu
        rowHeight={54}
        headerHeight={54}
      />
    </>
  );
};
export default Parties;