Compliance tabs

frontend/src/app/components/ComplianceTabs.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import ROUTES_COMPLIANCE from '../routes/Compliance';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../utilities/props';
+
+const ComplianceTabs = (props) => {
+  const { active, user } = props;
+
+  return (
+    <ul
+      className="nav nav-tabs"
+      key="tabs"
+      role="tablist"
+    >
+      <li
+        className={`nav-item ${(active === 'sales') ? 'active' : ''}`}
+        role="presentation"
+      >
+        <Link to={ROUTES_COMPLIANCE.LDVSALES}>LDV Sales</Link>
+      </li>
+      <li
+        className={`nav-item ${(active === 'reports') ? 'active' : ''}`}
+        role="presentation"
+      >
+        <Link to={ROUTES_COMPLIANCE.REPORTS}>Compliance Reports</Link>
+      </li>
+      <li
+        className={`nav-item ${(active === 'ratios') ? 'active' : ''}`}
+        role="presentation"
+      >
+        <Link to={ROUTES_COMPLIANCE.RATIOS}>Compliance Ratios</Link>
+      </li>
+
+    </ul>
+  );
+};
+
+ComplianceTabs.propTypes = {
+  active: PropTypes.string.isRequired,
+  user: CustomPropTypes.user.isRequired,
+};
+
+export default ComplianceTabs;

frontend/src/app/components/Navbar.js

@@ -9,6 +9,7 @@ import ROUTES_CREDIT_REQUESTS from '../routes/CreditRequests';
 import ROUTES_ORGANIZATIONS from '../routes/Organizations';
 import ROUTES_ROLES from '../routes/Roles';
 import ROUTES_VEHICLES from '../routes/Vehicles';
+import ROUTES_COMPLIANCE from '../routes/Compliance';
 
 class Navbar extends Component {
   constructor(props) {
@@ -159,6 +160,19 @@ class Navbar extends Component {
                   <span>Home</span>
                 </NavLink>
               </li>
+              {CONFIG.FEATURES.COMPLIANCE_REPORT.ENABLED
+              && ((!user.isGovernment && user.hasPermission('EDIT_SALES'))
+              || (user.isGovernment && user.hasPermission('VIEW_SALES')))
+              && (
+              <li className="nav-item">
+                <NavLink
+                  activeClassName="active"
+                  to={ROUTES_COMPLIANCE.LDVSALES}
+                >
+                  <span>Compliance Reporting</span>
+                </NavLink>
+              </li>
+              )}
               {CONFIG.FEATURES.MODEL_YEAR_REPORT.ENABLED && (
               <li className="nav-item">
                 <NavLink

frontend/src/app/config.js

@@ -26,6 +26,9 @@ const CONFIG = {
     CREDIT_TRANSACTIONS: {
       ENABLED: getConfig('credit_transactions.enabled', false),
     },
+    COMPLIANCE_REPORT: {
+      ENABLED: getConfig('compliance_report.enabled', false),
+    },
     INITIATIVE_AGREEMENTS: {
       ENABLED: getConfig('initiative_agreements.enabled', false),
     },

frontend/src/app/config/features.js

@@ -1,4 +1,5 @@
 window.zeva_config = {
+  'compliance_report.enabled': true,
   'credit_transfers.enabled': true,
   'credit_transactions.enabled': true,
   'initiative_agreements.enabled': false,

frontend/src/app/router.js

@@ -27,6 +27,10 @@ import UserEditContainer from '../users/UserEditContainer';
 import VehicleDetailsContainer from '../vehicles/VehicleDetailsContainer';
 import VehicleEditContainer from '../vehicles/VehicleEditContainer';
 import VehicleListContainer from '../vehicles/VehicleListContainer';
+import ComplianceReportsContainer from '../compliance/ComplianceReportsContainer';
+import ComplianceRatiosContainer from '../compliance/ComplianceRatiosContainer';
+import LDVSalesContainer from '../compliance/LDVSalesContainer';
+
 import ErrorHandler from './components/ErrorHandler';
 import Loading from './components/Loading';
 import StatusInterceptor from './components/StatusInterceptor';
@@ -41,6 +45,7 @@ import ROUTES_ORGANIZATIONS from './routes/Organizations';
 import ROUTES_NOTIFICATIONS from './routes/Notifications';
 import ROUTES_USERS from './routes/Users';
 import ROUTES_VEHICLES from './routes/Vehicles';
+import ROUTES_COMPLIANCE from './routes/Compliance';
 
 class Router extends Component {
   constructor(props) {
@@ -121,6 +126,18 @@ class Router extends Component {
         <PageLayout keycloak={keycloak} user={user}>
           <ErrorHandler statusCode={statusCode}>
             <Switch>
+              <Route
+                path={ROUTES_COMPLIANCE.LDVSALES}
+                render={() => <LDVSalesContainer keycloak={keycloak} user={user} />}
+              />
+              <Route
+                path={ROUTES_COMPLIANCE.REPORTS}
+                render={() => <ComplianceReportsContainer keycloak={keycloak} user={user} />}
+              />
+              <Route
+                path={ROUTES_COMPLIANCE.RATIOS}
+                render={() => <ComplianceRatiosContainer keycloak={keycloak} user={user} />}
+              />
               <Route
                 exact
                 path={ROUTES_ORGANIZATIONS.MINE_ADD_USER}
@@ -157,12 +174,12 @@ class Router extends Component {
               />
               <Route
                 path={ROUTES_ORGANIZATIONS.EDIT}
-                render={() => (typeof user.hasPermission === 'function'&& user.hasPermission('EDIT_ORGANIZATIONS') && user.isGovernment)  ? 
-                <VehicleSupplierEditContainer keycloak={keycloak} user={user} /> : (
-                <Redirect
-                  to={{
-                    path: "/"}}/>
-                )}
+                render={() => ((typeof user.hasPermission === 'function' && user.hasPermission('EDIT_ORGANIZATIONS') && user.isGovernment)
+                  ? <VehicleSupplierEditContainer keycloak={keycloak} user={user} /> : (
+                    <Redirect
+                      to={{ path: '/' }}
+                    />
+                  ))}
               />
               <Route
                 path={ROUTES_ORGANIZATIONS.DETAILS}
@@ -271,6 +288,7 @@ class Router extends Component {
                 path={ROUTES_CREDIT_REQUESTS.LIST}
                 render={() => <CreditRequestListContainer keycloak={keycloak} user={user} />}
               />
+
               <Route
                 exact
                 path="/"

frontend/src/app/routes/Compliance.js

@@ -0,0 +1,9 @@
+const API_BASE_PATH = '/compliance';
+
+const COMPLIANCE = {
+  LDVSALES: `${API_BASE_PATH}/ldv-sales`,
+  REPORTS: `${API_BASE_PATH}/reports`,
+  RATIOS: `${API_BASE_PATH}/ratios`,
+};
+
+export default COMPLIANCE;

frontend/src/compliance/ComplianceRatiosContainer.js

@@ -0,0 +1,20 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../app/utilities/props';
+import ComplianceTabs from '../app/components/ComplianceTabs';
+import ComplianceRatiosDetailsPage from './components/ComplianceRatiosDetailsPage';
+
+const ComplianceRatiosContainer = (props) => {
+  const { user } = props;
+  return (
+    <>
+      <ComplianceTabs active="ratios" user={user} />
+      <ComplianceRatiosDetailsPage user={user} />
+    </>
+  );
+};
+ComplianceRatiosContainer.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default ComplianceRatiosContainer;

frontend/src/compliance/ComplianceReportsContainer.js

@@ -0,0 +1,20 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../app/utilities/props';
+import ComplianceTabs from '../app/components/ComplianceTabs';
+import ComplianceReportsDetailsPage from './components/ComplianceReportsDetailsPage';
+
+const ComplianceReportsContainer = (props) => {
+  const { user } = props;
+  return (
+    <>
+      <ComplianceTabs active="reports" user={user} />
+      <ComplianceReportsDetailsPage user={user} />
+    </>
+  );
+};
+ComplianceReportsContainer.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default ComplianceReportsContainer;

frontend/src/compliance/LDVSalesContainer.js

@@ -0,0 +1,20 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../app/utilities/props';
+import ComplianceTabs from '../app/components/ComplianceTabs';
+import LDVSalesDetailsPage from './components/LDVSalesDetailsPage';
+
+const LDVSalesContainer = (props) => {
+  const { user } = props;
+  return (
+    <>
+      <ComplianceTabs active="sales" />
+      <LDVSalesDetailsPage user={user} />
+    </>
+  );
+};
+LDVSalesContainer.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default LDVSalesContainer;

frontend/src/compliance/components/ComplianceRatiosDetailsPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../../app/utilities/props';
+
+const ComplianceRatiosDetailsPage = (props) => {
+  const { user } = props;
+  return (
+    <div id="compliance-ldvsales-details" className="page">
+      <div className="row mt-3 mb-2">
+        <div className="col-sm-12">
+          <h2>Compliance Ratios</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+ComplianceRatiosDetailsPage.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default ComplianceRatiosDetailsPage;

frontend/src/compliance/components/ComplianceReportsDetailsPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../../app/utilities/props';
+
+const ComplianceReportsDetailsPage = (props) => {
+  const { user } = props;
+  return (
+    <div id="compliance-ldvsales-details" className="page">
+      <div className="row mt-3 mb-2">
+        <div className="col-sm-12">
+          <h2>Model Year Compliance Reports</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+ComplianceReportsDetailsPage.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default ComplianceReportsDetailsPage;

frontend/src/compliance/components/LDVSalesDetailsPage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPropTypes from '../../app/utilities/props';
+
+const LDVSalesDetailsPage = (props) => {
+  const { user } = props;
+  return (
+    <div id="compliance-ldvsales-details" className="page">
+      <div className="row mt-3 mb-2">
+        <div className="col-sm-12">
+          <h2>Annual LDV Sales</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+LDVSalesDetailsPage.propTypes = {
+  user: CustomPropTypes.user.isRequired,
+};
+export default LDVSalesDetailsPage;