feat: clickable summaries

frontend/src/views/AllocationAgreements/AllocationAgreementSummary.jsx

@@ -1,23 +1,24 @@
 import BCAlert from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
-import { apiRoutes } from '@/constants/routes'
+import { apiRoutes, ROUTES } from '@/constants/routes'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useParams, useNavigate } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 
 export const AllocationAgreementSummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
   const [gridKey, setGridKey] = useState(`allocation-agreements-grid`)
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const gridRef = useRef()
   const { t } = useTranslation(['common', 'allocationAgreement'])
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -135,6 +136,15 @@ export const AllocationAgreementSummary = ({ data }) => {
     setGridKey(`allocation-agreements-grid-${uuid()}`)
   }
 
+  const handleRowClicked = (params) => {
+    navigate(
+      ROUTES.REPORTS_ADD_ALLOCATION_AGREEMENTS.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   return (
     <Grid2 className="allocation-agreement-container" mx={-1}>
       <div>
@@ -159,6 +169,7 @@ export const AllocationAgreementSummary = ({ data }) => {
           enableCopyButton={false}
           defaultColDef={defaultColDef}
           suppressPagination={data.allocationAgreements.length <= 10}
+          handleRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>

frontend/src/views/FinalSupplyEquipments/FinalSupplyEquipmentSummary.jsx

@@ -1,23 +1,24 @@
 import BCAlert from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
-import { apiRoutes } from '@/constants/routes'
+import { apiRoutes, ROUTES } from '@/constants/routes'
 import { CommonArrayRenderer } from '@/utils/grid/cellRenderers'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useParams, useNavigate } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 
 export const FinalSupplyEquipmentSummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
   const [gridKey, setGridKey] = useState(`final-supply-equipments-grid`)
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const gridRef = useRef()
   const { t } = useTranslation(['common', 'finalSupplyEquipments'])
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -67,9 +68,12 @@ export const FinalSupplyEquipmentSummary = ({ data }) => {
         field: 'supplyToDate'
       },
       {
-        headerName: t('finalSupplyEquipment:finalSupplyEquipmentColLabels.kwhUsage'),
+        headerName: t(
+          'finalSupplyEquipment:finalSupplyEquipmentColLabels.kwhUsage'
+        ),
         field: 'kwhUsage',
-        valueFormatter: (params) => params.value ? params.value.toFixed(2) : '0.00'
+        valueFormatter: (params) =>
+          params.value ? params.value.toFixed(2) : '0.00'
       },
       {
         headerName: t(
@@ -106,7 +110,7 @@ export const FinalSupplyEquipmentSummary = ({ data }) => {
         headerName: t(
           'finalSupplyEquipment:finalSupplyEquipmentColLabels.ports'
         ),
-        field: 'ports',
+        field: 'ports'
       },
       {
         headerName: t(
@@ -183,6 +187,15 @@ export const FinalSupplyEquipmentSummary = ({ data }) => {
     setGridKey(`final-supply-equipments-grid-${uuid()}`)
   }
 
+  const handleRowClicked = (params) => {
+    navigate(
+      ROUTES.REPORTS_ADD_FINAL_SUPPLY_EQUIPMENTS.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   return (
     <Grid2 className="final-supply-equipment-container" mx={-1}>
       <div>
@@ -207,6 +220,7 @@ export const FinalSupplyEquipmentSummary = ({ data }) => {
           enableCopyButton={false}
           defaultColDef={defaultColDef}
           suppressPagination={data.finalSupplyEquipments.length <= 10}
+          handleRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>

frontend/src/views/FuelExports/FuelExportSummary.jsx

@@ -6,17 +6,19 @@ import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useParams, useNavigate } from 'react-router-dom'
 import i18n from '@/i18n'
+import { ROUTES } from '@/constants/routes'
 
 export const FuelExportSummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const gridRef = useRef()
   const { t } = useTranslation(['common', 'fuelExport'])
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -122,6 +124,15 @@ export const FuelExportSummary = ({ data }) => {
     return params.data.fuelExportId.toString()
   }
 
+  const handleRowClicked = (params) => {
+    navigate(
+      ROUTES.REPORTS_ADD_FUEL_EXPORTS.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   return (
     <Grid2 className="fuel-export-container" mx={-1}>
       <div>
@@ -144,6 +155,7 @@ export const FuelExportSummary = ({ data }) => {
           enableCopyButton={false}
           defaultColDef={defaultColDef}
           suppressPagination={data.fuelExports.length <= 10}
+          onRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>

frontend/src/views/FuelSupplies/FuelSupplySummary.jsx

@@ -1,12 +1,12 @@
 import BCAlert from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
-import { apiRoutes } from '@/constants/routes'
+import { apiRoutes, ROUTES } from '@/constants/routes'
 import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 import i18n from '@/i18n'
 import { StandardCellWarningAndErrors } from '@/utils/grid/errorRenderers'
@@ -15,11 +15,12 @@ export const FuelSupplySummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
   const [gridKey, setGridKey] = useState(`fuel-supplies-grid`)
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const gridRef = useRef()
   const { t } = useTranslation(['common', 'fuelSupply'])
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -125,6 +126,15 @@ export const FuelSupplySummary = ({ data }) => {
     setGridKey(`fuel-supplies-grid-${uuid()}`)
   }
 
+  const handleRowClicked = (params) => {
+    navigate(
+      ROUTES.REPORTS_ADD_SUPPLY_OF_FUEL.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   return (
     <Grid2 className="fuel-supply-container" mx={-1}>
       <div>
@@ -149,6 +159,7 @@ export const FuelSupplySummary = ({ data }) => {
           enableCopyButton={false}
           defaultColDef={defaultColDef}
           suppressPagination={data.fuelSupplies.length <= 10}
+          handleRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>

frontend/src/views/NotionalTransfers/NotionalTransferSummary.jsx

@@ -5,16 +5,18 @@ import { useGetNotionalTransfers } from '@/hooks/useNotionalTransfer'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useEffect, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation, useParams, useNavigate } from 'react-router-dom'
 import { formatNumberWithCommas as valueFormatter } from '@/utils/formatters'
+import { ROUTES } from '@/constants/routes'
 
 export const NotionalTransferSummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const { t } = useTranslation(['common', 'notionalTransfers'])
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -32,6 +34,16 @@ export const NotionalTransferSummary = ({ data }) => {
     []
   )
 
+  const handleRowClicked = (params) => {
+    console.log('Row clicked', params)
+    navigate(
+      ROUTES.REPORTS_ADD_NOTIONAL_TRANSFERS.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   const columns = [
     {
       headerName: t('notionalTransfer:notionalTransferColLabels.legalName'),
@@ -90,6 +102,8 @@ export const NotionalTransferSummary = ({ data }) => {
           }}
           enableCellTextSelection
           ensureDomOrder
+          handleRo
+          onRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>

frontend/src/views/OtherUses/OtherUsesSummary.jsx

@@ -4,18 +4,23 @@ import { BCGridViewer } from '@/components/BCDataGrid/BCGridViewer'
 import { useGetOtherUses } from '@/hooks/useOtherUses'
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2'
 import { useEffect, useState } from 'react'
-import { useLocation, useParams } from 'react-router-dom'
-import { formatNumberWithCommas as valueFormatter, decimalFormatter } from '@/utils/formatters'
+import { useLocation, useParams, useNavigate } from 'react-router-dom'
+import {
+  formatNumberWithCommas as valueFormatter,
+  decimalFormatter
+} from '@/utils/formatters'
 import { useTranslation } from 'react-i18next'
+import { ROUTES } from '@/constants/routes'
 
 export const OtherUsesSummary = ({ data }) => {
   const [alertMessage, setAlertMessage] = useState('')
   const [alertSeverity, setAlertSeverity] = useState('info')
   const { t } = useTranslation(['common', 'otherUses'])
 
-  const { complianceReportId } = useParams()
+  const { complianceReportId, compliancePeriod } = useParams()
 
   const location = useLocation()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (location.state?.message) {
@@ -81,6 +86,15 @@ export const OtherUsesSummary = ({ data }) => {
 
   const getRowId = (params) => params.data.otherUsesId
 
+  const handleRowClicked = (params) => {
+    navigate(
+      ROUTES.REPORTS_ADD_OTHER_USE_FUELS.replace(
+        ':compliancePeriod',
+        compliancePeriod
+      ).replace(':complianceReportId', complianceReportId)
+    )
+  }
+
   return (
     <Grid2 className="other-uses-container" data-test="container" mx={-1}>
       <div>
@@ -106,10 +120,11 @@ export const OtherUsesSummary = ({ data }) => {
           }}
           enableCellTextSelection
           ensureDomOrder
+          onRowClicked={handleRowClicked}
         />
       </BCBox>
     </Grid2>
   )
 }
 
-OtherUsesSummary.displayName = 'OtherUsesSummary'
+OtherUsesSummary.displayName = 'OtherUsesSummary'