LCFS- Protect routes for compliance report

[areyeslo]

Describe the Bug

Unauthorized users can access schedules for a compliance report without being allowed. For instance, Analyst users are not able to see compliance reports in Draft when accessing compliance-reporting route.

However, the Analyst user can have access to the schedule through hitting the URL http://localhost:3000/compliance-reporting/2024/1:

In addition, the unauthorized user can modify schedules:

Expected Behaviour:
The unauthorized user can not see compliance reports details if it is not allowed. In addition, the user cannot modify unauthorized schedules based on its role and report status.

Actual Behaviour:
The unauthorized user can not access resources when providing the URL associated.

Implications
Users may attempt to edit reports that are not supposed to be editable, leading to confusion.
Violates expected behavior and compliance workflows.
Steps To Reproduce
User/Role: IDIR

Log in as an IDIR user.
Open a compliance report that is in "Draft" status.
Observe that there is no compliance reports displayed.
Access the compliance report details through URL

Additional Notes:
We might need to create a HOC to handle validation:

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { isAccessAllowed } from '@/utils/accessValidation';
import { ROUTES } from '@/constants/routes';

const withAccessValidation = (WrappedComponent) => {
  return (props) => {
    const navigate = useNavigate();
    const { currentUser, reportData } = props;

    useEffect(() => {
      if (!isAccessAllowed(currentUser, reportData)) {
        navigate(ROUTES.REPORTS);
      }
    }, [currentUser, reportData, navigate]);

    if (!isAccessAllowed(currentUser, reportData)) {
      return null;
    }

    return <WrappedComponent {...props} />;
  };
};

export default withAccessValidation;

and use it in the components:

export default withAccessValidation(ComplianceReportViewSelector)