Purchase Order table

src/components/StatusFilterTab.tsx

@@ -7,6 +7,14 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import { styled } from '@mui/material/styles'
 
+function toTitleCase(str: string): string {
+  return str
+    .toLowerCase()
+    .split(/\s+/) // split by spaces
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
 const DropdownButton = styled(Button)(({ theme }) => ({
   textTransform: 'none',
   fontWeight: 400,
@@ -102,7 +110,7 @@ const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
               })
             }}
           >
-            {status}
+            {toTitleCase(status)}
           </Button>
         ))}
       </div>
@@ -135,7 +143,7 @@ const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
             })
           }}
         >
-          {status}
+          {toTitleCase(status)}
         </Button>
       ))}
 
@@ -158,7 +166,7 @@ const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
           })
         }}
       >
-        {isDropdownItemSelected ? selectedStatus : dropdownLabel}
+        {isDropdownItemSelected ? toTitleCase(selectedStatus) : dropdownLabel}
       </DropdownButton>
 
       <Menu
@@ -187,7 +195,7 @@ const StatusFilterTabs: React.FC<StatusFilterTabsProps> = ({
               color: selectedStatus === status ? 'primary.main' : 'text.primary'
             }}
           >
-            {status}
+            {toTitleCase(status)}
           </MenuItem>
         ))}
       </Menu>