Feat: LCFS - Implement Accessibility & Functional Enhancements for AG Grid Filtering Components #1585

backend/lcfs/web/api/transaction/services.py

@@ -84,9 +84,23 @@ def apply_transaction_filters(self, pagination, conditions):
             else:
                 # Handle other filters
                 field = get_field_for_filter(TransactionView, filter.field)
+                filter_value = filter.filter
+                # check if the date string is selected for filter
+                if filter.filter is None:
+                    filter_value = [
+                        datetime.strptime(filter.date_from, "%Y-%m-%d %H:%M:%S").strftime(
+                            "%Y-%m-%d"
+                        )
+                    ]
+                    if filter.date_to:
+                        filter_value.append(
+                            datetime.strptime(filter.date_to, "%Y-%m-%d %H:%M:%S").strftime(
+                                "%Y-%m-%d"
+                            )
+                        )
                 conditions.append(
                     apply_filter_conditions(
-                        field, filter.filter, filter.type, filter.filter_type
+                        field, filter_value, filter.type, filter.filter_type
                     )
                 )
 

backend/lcfs/web/api/user/repo.py

@@ -607,14 +607,17 @@ def _apply_login_history_filters(self, query, pagination):
                 filter_value = filter.filter
                 filter_option = filter.type
                 filter_type = filter.filter_type
-                if filter.field is not None:
+                if filter.field == "is_login_successful":
+                    filter_option = "true" if filter_value == "Success" else "false"
+                    field = get_field_for_filter(UserLoginHistory, "is_login_successful")
+                elif filter.field is not None:
                     field = get_field_for_filter(UserLoginHistory, filter.field)
-                    if field is not None:
-                        condition = apply_filter_conditions(
-                            field, filter_value, filter_option, filter_type
-                        )
-                        if condition is not None:
-                            conditions.append(condition)
+                if field is not None:
+                    condition = apply_filter_conditions(
+                        field, filter_value, filter_option, filter_type
+                    )
+                    if condition is not None:
+                        conditions.append(condition)
 
         query = query.where(and_(*conditions))
         # Apply ordering

frontend/src/components/BCDataGrid/BCDataGridServer.jsx

@@ -16,7 +16,7 @@ import { useApiService } from '@/services/useApiService'
 import BCAlert from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import DataGridLoading from '@/components/DataGridLoading'
-import { BCPagination } from './components'
+import { AccessibleHeader, BCPagination } from './components'
 import { useTranslation } from 'react-i18next' // Import useTranslation
 // Register the required AG Grid modules for row model and CSV export functionality
 ModuleRegistry.registerModules([ClientSideRowModelModule, CsvExportModule])
@@ -122,7 +122,7 @@ const BCDataGridServer = ({
     [apiService, apiEndpoint, page, size, sortModel]
   )
 
-  // Hanlde page change
+  // Handle page change
   const handleChangePage = useCallback((event, newPage) => {
     setLoading(true)
     setPage(newPage + 1)
@@ -189,7 +189,7 @@ const BCDataGridServer = ({
     let localFilteredData = [...rowData]
 
     // Handle the 'type' filter locally
-    const typeFilter = filterModel['type']
+    const typeFilter = filterModel.type
 
     if (typeFilter) {
       const filterText = typeFilter.filter?.toLowerCase() || ''
@@ -199,7 +199,7 @@ const BCDataGridServer = ({
       })
 
       // Remove 'type' from the filter model to prevent backend filtering
-      delete filterModel['type']
+      delete filterModel.type
     }
 
     // Handle other filters (backend filters)
@@ -269,10 +269,11 @@ const BCDataGridServer = ({
     suppressDragLeaveHidesColumns: true,
     suppressMovableColumns: true,
     suppressColumnMoveAnimation: false,
-    rowSelection: 'multiple',
     animateRows: true,
     suppressPaginationPanel: true,
     suppressScrollOnNewData: true,
+    suppressColumnVirtualisation: true,
+    enableBrowserTooltips: true,
     suppressCsvExport: false,
     // enableCellTextSelection: true, // enables text selection on the grid
     // ensureDomOrder: true,
@@ -288,6 +289,8 @@ const BCDataGridServer = ({
 
   // Memorized default column definition parameters
   const defaultColDefParams = useMemo(() => ({
+    headerComponent: AccessibleHeader,
+    suppressHeaderFilterButton: true,
     resizable: true,
     sortable: true,
     filter: true,

frontend/src/components/BCDataGrid/BCGridBase.jsx

@@ -33,13 +33,14 @@ export const BCGridBase = forwardRef(({ autoSizeStrategy, ...props }, ref) => {
         suppressDragLeaveHidesColumns
         suppressMovableColumns
         suppressColumnMoveAnimation={false}
-        reactiveCustomComponents
         suppressCsvExport={false}
+        suppressColumnVirtualisation={true}
+        enableBrowserTooltips={true}
         suppressPaginationPanel
         suppressScrollOnNewData
         getRowStyle={getRowStyle}
         rowHeight={45}
-        headerHeight={45}
+        headerHeight={40}
         {...props}
       />
     </>

frontend/src/components/BCDataGrid/BCGridViewer.jsx

@@ -1,7 +1,7 @@
 import BCAlert, { FloatingAlert } from '@/components/BCAlert'
 import BCBox from '@/components/BCBox'
 import { BCGridBase } from '@/components/BCDataGrid/BCGridBase'
-import { BCPagination } from '@/components/BCDataGrid/components'
+import { AccessibleHeader, BCPagination } 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'
@@ -161,6 +161,8 @@ export const BCGridViewer = ({
 
   const defaultColDefParams = useMemo(
     () => ({
+      headerComponent: AccessibleHeader,
+      suppressHeaderFilterButton: true,
       resizable: true,
       sortable: true,
       filter: true,

frontend/src/components/BCDataGrid/components/Filters/BCDateFloatingFilter.jsx

@@ -11,6 +11,8 @@ export const BCDateFloatingFilter = ({
   model,
   onModelChange,
   disabled = false,
+  minDate = '2013-01-01',
+  maxDate = '2040-01-01',
   initialFilterType = 'equals',
   label = 'Select Date'
 }) => {
@@ -52,7 +54,7 @@ export const BCDateFloatingFilter = ({
       return
     }
 
-    if (model.dateFrom) {
+    if (model?.dateFrom) {
       const date = new Date(model.dateFrom)
       setSelectedDate(isValid(date) ? date : null)
     }
@@ -67,7 +69,6 @@ export const BCDateFloatingFilter = ({
       aria-labelledby="date-picker-label"
       sx={{
         border: 'none',
-        '& .MuiOutlinedInput-root': { p: 0 },
         '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
         '& .Mui-focused': {
           border: '1px solid #495057',
@@ -79,8 +80,13 @@ export const BCDateFloatingFilter = ({
         id="date-picker"
         aria-label="Date Picker"
         aria-describedby="date-picker-description"
-        sx={{ border: 'none', borderBottom: '2px solid #495057' }}
+        sx={{
+          border: 'none',
+          borderBottom: '4px solid #495057'
+        }}
         value={selectedDate}
+        minDate={new Date(minDate)}
+        maxDate={new Date(maxDate)}
         onChange={handleChange}
         open={open}
         onOpen={handleOpen}
@@ -95,6 +101,7 @@ export const BCDateFloatingFilter = ({
               startAdornment: (
                 <InputAdornment position="start">
                   <IconButton
+                    sx={{ marginLeft: 0, paddingLeft: '6px' }}
                     size="small"
                     edge="start"
                     onClick={() => setOpen(true)}
@@ -107,6 +114,7 @@ export const BCDateFloatingFilter = ({
               endAdornment: selectedDate && (
                 <InputAdornment position="end">
                   <IconButton
+                    sx={{ marginRight: 0, paddingRight: '6px' }}
                     size="small"
                     onClick={handleClear}
                     onMouseDown={(event) => event.stopPropagation()}

frontend/src/components/BCDataGrid/components/Filters/BCSelectFloatingFilter.jsx

@@ -80,7 +80,7 @@ export const BCSelectFloatingFilter = ({
     } else {
       setSelectedValues([model?.filter])
     }
-  }, [model, initialSelectedValues])
+  }, [model])
 
   return (
     <div
@@ -128,6 +128,7 @@ export const BCSelectFloatingFilter = ({
             onClick={handleClear}
             onMouseDown={(event) => event.stopPropagation()}
             aria-label="Clear selection"
+            tabIndex={-1}
           >
             <ClearIcon fontSize="small" />
           </IconButton>

frontend/src/components/BCDataGrid/components/Renderers/AccessibleHeader.jsx

@@ -0,0 +1,7 @@
+export const AccessibleHeader = (props) => {
+  return (
+    <div role="columnheader" aria-label={props.column.colDef.headerName} data-ref="columnWrapper">
+      <span className="ag-header-cell-text">{props.column.colDef.headerName}</span>
+    </div>
+  )
+}

frontend/src/components/BCDataGrid/components/Renderers/RequiredHeader.jsx

@@ -1,8 +1,8 @@
 export const RequiredHeader = (props) => {
   return (
-    <div>
+    <div role="columnheader" aria-label={props.column.colDef.headerName}>
       <span style={{ color: 'red' }}>*</span>
-      <span>{props.column.colDef.headerName}</span>
+      <span className="ag-header-cell-text">{props.column.colDef.headerName}</span>
     </div>
   )
 }

frontend/src/components/BCDataGrid/components/index.js

@@ -6,6 +6,7 @@ export { DateRangeCellEditor } from './Editors/DateRangeCellEditor'
 export { ActionsRenderer } from './Renderers/ActionsRenderer'
 export { ActionsRenderer2 } from './Renderers/ActionsRenderer2'
 export { RequiredHeader } from './Renderers/RequiredHeader'
+export { AccessibleHeader } from './Renderers/AccessibleHeader'
 export { ValidationRenderer } from './Renderers/ValidationRenderer'
 export { ValidationRenderer2 } from './Renderers/ValidationRenderer2'
 export { BCColumnSetFilter } from './Filters/BCColumnSetFilter'

frontend/src/constants/statuses.js

@@ -66,3 +66,10 @@ export const FUEL_CODE_STATUSES = {
 export function getAllFuelCodeStatuses() {
   return Object.values(FUEL_CODE_STATUSES)
 }
+
+export const TRANSACTION_TYPES = {
+  TRANSFER: 'Transfer',
+  INITIATIVE_AGREEMENT: 'InitiativeAgreement',
+  COMPLIANCE_REPORT: 'ComplianceReport',
+  ADMINISTRATIVE_ADJUSTMENT: 'AdminAdjustment'
+}

frontend/src/utils/grid/cellRenderers.jsx

@@ -35,64 +35,55 @@ export const LinkRenderer = (props) => {
     </Link>
   )
 }
+const BaseStatusRenderer = ({
+  isView = false,
+  value = false,
+  successText = 'Active',
+  failureText = 'Inactive',
+  successColor = 'success',
+  failureColor = 'smoky'
+}) => {
+  const badgeStyles = {
+    ...(!isView ? { display: 'flex', justifyContent: 'center' } : {}),
+    '& .MuiBadge-badge': {
+      minWidth: '120px',
+      fontWeight: 'regular',
+      textTransform: 'capitalize',
+      fontSize: '0.875rem',
+      padding: '0.4em 0.6em'
+    }
+  }
 
-export const StatusRenderer = (props) => {
   return (
     <BCBox
-      component={props.isView ? 'span' : 'div'}
+      component={isView ? 'span' : 'div'}
       mt={1}
       sx={{ width: '100%', height: '100%' }}
     >
       <BCBadge
-        badgeContent={props.data.isActive ? 'Active' : 'Inactive'}
-        color={props.data.isActive ? 'success' : 'smoky'}
+        badgeContent={value ? successText : failureText}
+        color={value ? successColor : failureColor}
         variant="gradient"
         size="md"
-        sx={{
-          ...(!props.isView
-            ? { display: 'flex', justifyContent: 'center' }
-            : {}),
-          '& .MuiBadge-badge': {
-            minWidth: '120px',
-            fontWeight: 'regular',
-            textTransform: 'capitalize',
-            fontSize: '0.875rem',
-            padding: '0.4em 0.6em'
-          }
-        }}
+        sx={badgeStyles}
       />
     </BCBox>
   )
 }
 
-export const LoginStatusRenderer = (props) => {
-  return (
-    <BCBox
-      component={props.isView ? 'span' : 'div'}
-      mt={1}
-      sx={{ width: '100%', height: '100%' }}
-    >
-      <BCBadge
-        badgeContent={props.data.isLoginSuccessful ? 'True' : 'False'}
-        color={props.data.isLoginSuccessful ? 'success' : 'error'}
-        variant="gradient"
-        size="md"
-        sx={{
-          ...(!props.isView
-            ? { display: 'flex', justifyContent: 'center' }
-            : {}),
-          '& .MuiBadge-badge': {
-            minWidth: '120px',
-            fontWeight: 'regular',
-            textTransform: 'capitalize',
-            fontSize: '0.875rem',
-            padding: '0.4em 0.6em'
-          }
-        }}
-      />
-    </BCBox>
-  )
-}
+export const StatusRenderer = (props) => (
+  <BaseStatusRenderer isView={props.isView} value={props.data.isActive} />
+)
+
+export const LoginStatusRenderer = (props) => (
+  <BaseStatusRenderer
+    isView={props.isView}
+    value={props.data.isLoginSuccessful}
+    successText="Success"
+    failureText="Failed"
+    failureColor="error"
+  />
+)
 
 export const OrgStatusRenderer = (props) => {
   const location = useLocation()

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

@@ -13,9 +13,9 @@ export const UserActivity = () => {
   const navigate = useNavigate()
 
   const getRowId = useCallback((params) => {
-    return `${params.data.transactionType.toLowerCase()}-${
-      params.data.transactionId
-    }`
+    return `${
+      params.data.actionTaken
+    }-${params.data.transactionType}-${params.data.transactionId}`
   }, [])
 
   const handleRowClicked = useCallback(
@@ -64,7 +64,6 @@ export const UserActivity = () => {
             defaultMinWidth: 50,
             defaultMaxWidth: 600
           }}
-          rowSelection={{ isRowSelectable: false }}
           onRowClicked={handleRowClicked}
         />
       </BCBox>

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

@@ -15,7 +15,6 @@ import { useTranslation } from 'react-i18next'
 
 import { ROUTES, apiRoutes } from '@/constants/routes'
 import { usersColumnDefs, idirUserDefaultFilter } from './_schema'
-import { calculateRowHeight } from '@/utils/formatters'
 
 export const Users = () => {
   const { t } = useTranslation(['common', 'admin'])