From 5f495507a26315ee84784f88a637627cd7559e39 Mon Sep 17 00:00:00 2001
From: Lawrence Lau <lawrence.lau@gov.bc.ca>
Date: Tue, 24 Sep 2024 15:42:21 -0700
Subject: [PATCH] initial commit

---
 .../src/components/projects/ProjectsTable.tsx     | 15 ++++++++++++++-
 react-app/src/components/table/DataTable.tsx      |  5 ++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/react-app/src/components/projects/ProjectsTable.tsx b/react-app/src/components/projects/ProjectsTable.tsx
index 2ebec24e1..b21f64006 100644
--- a/react-app/src/components/projects/ProjectsTable.tsx
+++ b/react-app/src/components/projects/ProjectsTable.tsx
@@ -108,6 +108,17 @@ const ProjectsTable = () => {
       case 'All Projects':
         ref.current.setFilterModel({ items: [] });
         break;
+      case 'SPL Projects':
+        ref.current.setFilterModel({
+          items: [
+            {
+              value: ['Approved for SPL', 'Contract in Place', 'On Market', 'Pre-Marketing'],
+              field: 'Status',
+              operator: 'isAnyOf',
+            },
+          ],
+        });
+        break;
       case 'Approved for SPL':
       case 'Contract in Place':
       case 'On Market':
@@ -235,7 +246,9 @@ const ProjectsTable = () => {
           <CustomMenuItem key={'All Projects'} value={'All Projects'}>
             All Projects
           </CustomMenuItem>,
-          <CustomListSubheader key={'SPL Projects'}>SPL Projects</CustomListSubheader>,
+          <CustomMenuItem key={'SPL Projects'} value={'SPL Projects'} sx={{ fontWeight: 'bold' }}>
+            SPL Projects
+          </CustomMenuItem>,
           <CustomMenuItem key={'Approved for SPL'} value={'Approved for SPL'}>
             Approved for SPL
           </CustomMenuItem>,
diff --git a/react-app/src/components/table/DataTable.tsx b/react-app/src/components/table/DataTable.tsx
index 2f73e1dcb..0f34b2612 100644
--- a/react-app/src/components/table/DataTable.tsx
+++ b/react-app/src/components/table/DataTable.tsx
@@ -18,6 +18,7 @@ import {
   MenuItem,
   Select,
   SxProps,
+  Theme,
   Tooltip,
   Typography,
   debounce,
@@ -143,7 +144,9 @@ export const CustomDataGrid = (props: DataGridProps) => {
   );
 };
 
-export const CustomMenuItem = (props: PropsWithChildren & { value: string }) => {
+export const CustomMenuItem = (
+  props: PropsWithChildren & { value: string; sx?: SxProps<Theme> },
+) => {
   const theme = useTheme();
   return (
     <MenuItem