feat: UI updates (#39)

frontend/package.json

@@ -17,6 +17,7 @@
     "@bcgov/bc-sans": "^2.1.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@js-joda/core": "^5.6.1",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.1",
     "@mui/system": "^5.15.9",

frontend/src/components/DataTable.tsx

@@ -9,7 +9,12 @@ import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
 import TableRow from '@mui/material/TableRow'
-import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  GridColDef,
+  GridFilterModel,
+  GridToolbar,
+} from '@mui/x-data-grid'
 import { useState } from 'react'
 import { useSelector } from 'react-redux'
 const columns: GridColDef[] = [
@@ -92,7 +97,15 @@ export default function DataTable() {
   const status: string = useSelector((state: RootState) => state.omrr.status)
 
   const [selectedRow, setSelectedRow] = useState(null)
-
+  const [filterModel, setFilterModel] = useState<GridFilterModel>({
+    items: [
+      {
+        field: 'Authorization Status',
+        operator: 'equals',
+        value: 'Active',
+      },
+    ],
+  })
   const handleClose = () => {
     setSelectedRow(null)
   }
@@ -107,12 +120,29 @@ export default function DataTable() {
       }}
     >
       <DataGrid
+        sx={{
+          '& .MuiDataGrid-toolbarContainer': {
+            border: '1px solid #385a8a',
+            backgroundColor: '#385a8a',
+            color: '#ffffff',
+          },
+          '& .MuiInputBase-root': {
+            backgroundColor: '#ffffff',
+          },
+        }}
         slots={{ toolbar: GridToolbar }}
+        disableColumnSelector
         slotProps={{
           toolbar: {
             showQuickFilter: true,
+            quickFilterProps: {
+              placeholder: 'Search across all fields',
+              debounceMs: 250,
+            },
           },
         }}
+        filterModel={filterModel}
+        onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
         experimentalFeatures={{ ariaV7: true }}
         checkboxSelection={false}
         rows={data}

frontend/src/features/omrr/omrr-slice.ts

@@ -7,6 +7,7 @@ import {
 import { createSlice } from '@reduxjs/toolkit'
 import { RootState } from '@/app/store'
 import apiService from '@/service/api-service'
+import { DateTimeFormatter, nativeJs } from '~/@js-joda/core'
 
 export interface OmrrSliceState {
   value: OmrrData[]
@@ -56,23 +57,29 @@ export const omrrSlice = createSlice({
       state.status = 'succeeded'
       // Store the data in the state
 
-      let omrrData = [];
-      for(const item of action.payload){
+      let omrrData = []
+      for (const item of action.payload) {
         const individualData = {
-          ...item
+          ...item,
         }
-        if(individualData['Effective/Issue Date']){
-          individualData['Effective/Issue Date'] = new Date(item['Effective/Issue Date']).toLocaleDateString();
-        }else{
-          individualData['Effective/Issue Date'] = undefined;
+        if (individualData['Effective/Issue Date']) {
+          const date = new Date(item['Effective/Issue Date'])
+          individualData['Effective/Issue Date'] = nativeJs(date).format(
+            DateTimeFormatter.ISO_LOCAL_DATE,
+          )
+        } else {
+          individualData['Effective/Issue Date'] = undefined
         }
-        if(item['Last Amendment Date']){
-          individualData['Last Amendment Date'] = new Date(item['Last Amendment Date']).toLocaleDateString();
-        }else{
-          individualData['Last Amendment Date'] = undefined;
+        if (item['Last Amendment Date']) {
+          const date = new Date(item['Last Amendment Date'])
+          individualData['Last Amendment Date'] = nativeJs(date).format(
+            DateTimeFormatter.ISO_LOCAL_DATE,
+          )
+        } else {
+          individualData['Last Amendment Date'] = undefined
         }
 
-        omrrData.push(individualData);
+        omrrData.push(individualData)
       }
       state.value = omrrData
       state.mapValue = state.value?.filter(

frontend/src/index.css

@@ -1,33 +1,37 @@
 @font-face {
-    font-family: 'BCSans';
-    font-style: normal;
-    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Regular.woff') format('woff');
+  font-family: 'BCSans';
+  font-style: normal;
+  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Regular.woff')
+    format('woff');
 }
 
 @font-face {
-    font-family: 'BCSans-Italic';
-    font-style: italic;
-    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Italic.woff') format('woff');
+  font-family: 'BCSans-Italic';
+  font-style: italic;
+  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Italic.woff')
+    format('woff');
 }
 
 @font-face {
-    font-family: 'BCSans-Bold';
-    font-weight: 700;
-    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Bold.woff') format('woff');
+  font-family: 'BCSans-Bold';
+  font-weight: 700;
+  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Bold.woff')
+    format('woff');
 }
 
 @font-face {
-    font-family: 'BCSans-BoldItalic';
-    font-style: italic;
-    font-weight: 700;
-    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-BoldItalic.woff') format('woff');
+  font-family: 'BCSans-BoldItalic';
+  font-style: italic;
+  font-weight: 700;
+  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-BoldItalic.woff')
+    format('woff');
 }
 
 .MuiDrawer-paperAnchorLeft {
-    margin-top: 4.2em !important;
+  margin-top: 4.2em !important;
 }
 
 .map-container {
-    border-radius: 4px;
-    z-index: 1;
+  border-radius: 4px;
+  z-index: 1;
 }

frontend/src/main.tsx

@@ -5,7 +5,7 @@ import { CssBaseline } from '@mui/material'
 import theme from './theme'
 import App from './App'
 import { store } from './app/store'
-import "./index.css";
+import './index.css'
 import { Provider } from 'react-redux'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(