fix

Author: MarconLP

src/components/PriorityBadge.tsx

@@ -14,6 +14,10 @@ export function PriorityBadge({ priority }: PriorityBadgeProps) {
         return 'bg-yellow-100 text-yellow-700 border-yellow-200'
       case 'low':
         return 'bg-gray-100 text-gray-700 border-gray-200'
+      case 'filled':
+        return 'bg-green-100 text-green-700 border-green-200'
+      case 'pushed_to_next_quarter':
+        return 'bg-blue-100 text-blue-700 border-blue-200'
       default:
         return 'bg-gray-100 text-gray-700 border-gray-200'
     }

src/routes/proposed-hires.tsx

@@ -27,6 +27,7 @@ import { customFilterFns, Filter } from '.'
 import { getDeelEmployeesAndProposedHires } from './org-chart'
 import AddProposedHirePanel from '@/components/AddProposedHirePanel'
 import { useLocalStorage } from 'usehooks-ts'
+import { PriorityBadge } from '@/components/PriorityBadge'
 
 type ProposedHire = Prisma.ProposedHireGetPayload<{
   include: {
@@ -70,23 +71,6 @@ function handleSortToggle(column: Column<any, unknown>) {
   }
 }
 
-function getPriorityBgColor(priority: string) {
-  switch (priority) {
-    case 'high':
-      return 'bg-red-50 hover:bg-red-100'
-    case 'medium':
-      return 'bg-yellow-50 hover:bg-yellow-100'
-    case 'low':
-      return 'bg-blue-50 hover:bg-blue-100'
-    case 'filled':
-      return 'bg-green-50 hover:bg-green-100'
-    case 'pushed_to_next_quarter':
-      return 'bg-gray-50 hover:bg-gray-100'
-    default:
-      return 'hover:bg-gray-50'
-  }
-}
-
 function RouteComponent() {
   const [columnFilters, setColumnFilters] = useLocalStorage<ColumnFiltersState>(
     'proposed-hires.table.columnFilters',
@@ -149,6 +133,9 @@ function RouteComponent() {
     {
       accessorKey: 'priority',
       header: 'Priority',
+      cell: ({ row }) => {
+        return <PriorityBadge priority={row.original.priority} />
+      },
       sortingFn: (rowA, rowB) => {
         const priorityOrder = [
           'high',
@@ -263,10 +250,7 @@ function RouteComponent() {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={getPriorityBgColor(row.original.priority)}
-                  >
+                  <TableRow key={row.id}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="px-1 py-1">
                         {flexRender(