Merge branch 'release-0.2.0' into LCFS-1207-AddFuelCodeCIColumnsFuels…

…OtherUse_v2

frontend/src/assets/locales/en/admin.json

@@ -81,5 +81,11 @@
     "signing_authority": "can sign and submit compliance reports to government and transfers to trade partners/government.",
     "read_only": "can view transactions, compliance reports and files.",
     "optional": "optional"
+  },
+  "userActivity":{
+    "actionTaken": "Action taken",
+    "transactionType": "Transaction type",
+    "transactionId": "Transaction ID",
+    "date": "Date"
   }
 }

frontend/src/assets/locales/en/common.json

@@ -49,5 +49,6 @@
     "message": "Sorry, you do not have permission to access this page.",
     "contact": "Contact your LCFS or BCeID administrator or contact",
     "email": "[email protected]"
-  }
+  },
+  "ClearFilters": "Clear filters"
 }

frontend/src/components/BCDataGrid/BCDataGridServer.jsx

@@ -76,6 +76,7 @@ const BCDataGridServer = ({
   paginationPageSizeSelector,
   highlightedRowId,
   suppressPagination,
+  onSetResetGrid,
   ...others
 }) => {
   const { t } = useTranslation(['report'])
@@ -179,6 +180,38 @@ const BCDataGridServer = ({
     params.api.hideOverlay()
   })
 
+  const resetGrid = useCallback(() => {
+    // Clear localStorage
+    localStorage.removeItem(`${gridKey}-filter`)
+    localStorage.removeItem(`${gridKey}-column`)
+
+    // Reset states
+    setPage(1)
+    setSize(paginationPageSize)
+    setSortModel(defaultSortModel || [])
+    setFilterModel(defaultFilterModel || [])
+
+    // Clear UI filters
+    if (gridRef.current?.api) {
+      gridRef.current.api.setFilterModel(null)
+      gridRef.current.api.applyColumnState({
+        defaultState: { sort: null }
+      })
+    }
+  }, [
+    gridKey,
+    paginationPageSize,
+    defaultSortModel,
+    defaultFilterModel,
+    gridRef
+  ])
+
+  useEffect(() => {
+    if (onSetResetGrid) {
+      onSetResetGrid(resetGrid)
+    }
+  }, [onSetResetGrid, resetGrid])
+
   // Callback for grid filter changes.
   const onFilterChanged = useCallback(() => {
     setPage(1)

frontend/src/components/BCDataGrid/BCGridBase.jsx

@@ -9,7 +9,8 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState
+  useState,
+  useImperativeHandle
 } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
@@ -19,6 +20,7 @@ export const BCGridBase = forwardRef(
   ({ autoSizeStrategy, autoHeight, ...props }, ref) => {
     const [searchParams] = useSearchParams()
     const highlightedId = searchParams.get('hid')
+    const gridRef = useRef(null)
 
     const loadingOverlayComponent = useMemo(() => DataGridLoading, [])
 
@@ -69,9 +71,29 @@ export const BCGridBase = forwardRef(
       }
     }, [determineHeight])
 
+    const clearFilters = useCallback(() => {
+      const api = gridRef.current?.api
+      if (api) {
+        // Clear filter model
+        api.setFilterModel(null)
+
+        // Clear individual filters
+        const columns = api.getColumnDefs()
+        columns.forEach(column => {
+          api.destroyFilter(column.field)
+        })
+      }
+    }, [])
+
+    // Expose clearFilters method through ref
+    useImperativeHandle(ref, () => ({
+      ...gridRef.current,
+      clearFilters
+    }))
+
     return (
       <AgGridReact
-        ref={ref}
+        ref={gridRef}
         domLayout={domLayout}
         containerStyle={{ height }}
         loadingOverlayComponent={loadingOverlayComponent}
@@ -100,4 +122,4 @@ export const BCGridBase = forwardRef(
   }
 )
 
-BCGridBase.displayName = 'BCGridBase'
+BCGridBase.displayName = 'BCGridBase'

frontend/src/components/BCDataGrid/BCGridViewer.jsx

@@ -7,8 +7,7 @@ import {
 } from '@/components/BCDataGrid/components'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-material.css'
-import { useCallback, useMemo, useRef, useState } from 'react'
-import BCButton from '../BCButton'
+import { useCallback, useMemo, useRef, useState, useEffect } from 'react'
 
 export const BCGridViewer = ({
   gridRef,
@@ -33,6 +32,7 @@ export const BCGridViewer = ({
   getRowId,
   onRowClicked,
   autoSizeStrategy,
+  onSetResetGrid,
   ...props
 }) => {
   const localRef = useRef(null)
@@ -86,20 +86,28 @@ export const BCGridViewer = ({
     [defaultSortModel, gridKey]
   )
   const resetGrid = useCallback(() => {
+    // Clear localStorage
     localStorage.removeItem(`${gridKey}-filter`)
     localStorage.removeItem(`${gridKey}-column`)
+
+    // Reset states
     setPage(1)
     setSize(paginationPageSize)
-    setSortModel(defaultSortModel)
-    setFilterModel(defaultFilterModel)
+    setSortModel(defaultSortModel || [])
+    setFilterModel(defaultFilterModel || [])
+
+    // Clear UI filters
+    if (ref.current?.api) {
+      ref.current.clearFilters()
+    }
 
     // Re-fetch the data by calling the query function
     query(
       {
         page: 1,
         size: paginationPageSize,
-        sortOrders: defaultSortModel,
-        filters: defaultFilterModel,
+        sortOrders: defaultSortModel || [],
+        filters: defaultFilterModel || [],
         ...queryParams
       },
       { retry: false }
@@ -110,9 +118,18 @@ export const BCGridViewer = ({
     defaultSortModel,
     defaultFilterModel,
     query,
-    queryParams
+    queryParams,
+    ref
   ])
 
+
+  useEffect(() => {
+    if (onSetResetGrid) {
+      onSetResetGrid(resetGrid)
+    }
+  }, [onSetResetGrid, resetGrid])
+
+
   const onFirstDataRendered = useCallback((params) => {
     params.api.hideOverlay()
   }, [])
@@ -188,15 +205,6 @@ export const BCGridViewer = ({
         <BCAlert severity="error">
           {error.message}. Please contact your administrator.
         </BCAlert>
-        <BCButton
-          onClick={resetGrid}
-          variant="contained"
-          id="grid-reset-btn"
-          color="primary"
-          autoFocus
-        >
-          Clear filter & sort
-        </BCButton>
       </div>
     </div>
   ) : (

frontend/src/components/ClearFiltersButton.jsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import BCButton from '@/components/BCButton'
+import BCTypography from '@/components/BCTypography'
+import { faFilterCircleXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEraser } from '@fortawesome/free-solid-svg-icons';
+
+export const ClearFiltersButton = ({
+  onClick,
+  size = 'small',
+  color = 'primary',
+  sx = {},
+  buttonRef = null
+}) => {
+  const { t } = useTranslation(['common'])
+
+  return (
+    <BCButton
+      ref={buttonRef}
+      variant="outlined"
+      size={size}
+      color={color}
+      onClick={onClick}
+      startIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="small-icon" />}
+      sx={{
+        minHeight: '36px',
+        ...sx
+      }}
+    >
+      {t('common:ClearFilters')}
+    </BCButton>
+  )
+}

frontend/src/components/DownloadButton.jsx

@@ -1,17 +1,19 @@
+import { forwardRef  } from 'react'
 import BCButton from '@/components/BCButton'
 import BCTypography from '@/components/BCTypography'
 import { faFileExcel } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CircularProgress } from '@mui/material'
 
-export const DownloadButton = ({
+export const DownloadButton = forwardRef(({
   onDownload,
   isDownloading,
   label,
   downloadLabel,
   dataTest
-}) => (
+}, ref) => (
   <BCButton
+    ref={ref}
     data-test={dataTest}
     variant="outlined"
     size="small"
@@ -31,4 +33,4 @@ export const DownloadButton = ({
       {isDownloading ? downloadLabel : label}
     </BCTypography>
   </BCButton>
-)
+))

frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx

@@ -1,14 +1,16 @@
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import BCBox from '@/components/BCBox'
 import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer'
 import BCTypography from '@/components/BCTypography'
+import { ClearFiltersButton } from '@/components/ClearFiltersButton'
 import { useTranslation } from 'react-i18next'
 import { auditLogColDefs, defaultAuditLogSortModel } from './_schema'
 import { apiRoutes } from '@/constants/routes'
 import { LinkRenderer } from '@/utils/grid/cellRenderers.jsx'
 
 export const AuditLog = () => {
   const { t } = useTranslation(['common', 'admin'])
+  const [resetGridFn, setResetGridFn] = useState(null)
   const gridRef = useRef()
 
   const gridOptions = {
@@ -33,12 +35,26 @@ export const AuditLog = () => {
     []
   )
 
+  const handleSetResetGrid = useCallback((fn) => {
+    setResetGridFn(() => fn)
+  }, [])
+
+  const handleClearFilters = useCallback(() => {
+    if (resetGridFn) {
+      resetGridFn()
+    }
+  }, [resetGridFn])
+
   return (
     <BCBox>
       <BCTypography variant="h5" color="primary" mb={2}>
         {t('admin:AuditLog')}
       </BCTypography>
-
+      <BCBox mb={2}>
+        <ClearFiltersButton
+          onClick={handleClearFilters}
+        />
+      </BCBox>
       <BCDataGridServer
         gridRef={gridRef}
         apiEndpoint={apiEndpoint}
@@ -52,6 +68,7 @@ export const AuditLog = () => {
         enableExportButton={true}
         exportName="AuditLog"
         defaultColDef={defaultColDef}
+        onSetResetGrid={handleSetResetGrid}
       />
     </BCBox>
   )

frontend/src/views/Admin/AdminMenu/components/UserActivity.jsx

@@ -1,15 +1,18 @@
 import BCBox from '@/components/BCBox'
 import BCTypography from '@/components/BCTypography'
 import { useTranslation } from 'react-i18next'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState, useRef } from 'react'
 import { userActivityColDefs } from '@/views/Admin/AdminMenu/components/_schema'
 import { ROUTES } from '@/constants/routes'
 import { BCGridViewer } from '@/components/BCDataGrid/BCGridViewer'
+import { ClearFiltersButton } from '@/components/ClearFiltersButton'
 import { useGetUserActivities } from '@/hooks/useUser'
 import { LinkRenderer } from '@/utils/grid/cellRenderers.jsx'
 
 export const UserActivity = () => {
   const { t } = useTranslation(['common', 'admin'])
+  const [resetGridFn, setResetGridFn] = useState(null)
+  const gridRef = useRef(null)
 
   const getRowId = useCallback((params) => {
     return `${
@@ -44,13 +47,29 @@ export const UserActivity = () => {
     []
   )
 
+  const handleSetResetGrid = useCallback((fn) => {
+    setResetGridFn(() => fn)
+  }, [])
+
+  const handleClearFilters = useCallback(() => {
+    if (resetGridFn) {
+      resetGridFn()
+    }
+  }, [resetGridFn])
+
   return (
     <BCBox>
       <BCTypography variant="h5" color="primary" mb={2}>
         {t('admin:UserActivity')}
       </BCTypography>
+      <BCBox mb={2}>
+        <ClearFiltersButton 
+          onClick={handleClearFilters}
+        />
+      </BCBox>
       <BCBox component="div" sx={{ height: '100%', width: '100%' }}>
         <BCGridViewer
+          gridRef={gridRef}
           gridKey={'all-user-activities-grid'}
           columnDefs={userActivityColDefs}
           query={useGetUserActivities}
@@ -64,8 +83,9 @@ export const UserActivity = () => {
             defaultMaxWidth: 600
           }}
           defaultColDef={defaultColDef}
+          onSetResetGrid={handleSetResetGrid}
         />
       </BCBox>
     </BCBox>
   )
-}
+}