src/components/OrderItem/OrderItem.tsx

@@ -3,7 +3,7 @@ import { Td, Tr, Link, Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 
-import { getTimeSlot } from '../../lib/date-helpers';
+import { getTimeSlot } from '../../lib';
 
 const statuses = [
   'pending' as const,
@@ -26,6 +26,16 @@ export type OrderProps = {
   location?: string;
 };
 
+type Status = (typeof statuses)[number];
+
+const statusColors: Record<Status, string> = {
+  pending: 'yellow.100',
+  progress: 'blue.100',
+  working: 'orange.100',
+  canceled: 'red.100',
+  complete: 'green.100',
+};
+
 const OrderItem = ({
   carNumber,
   startWashTime,
@@ -40,6 +50,7 @@ const OrderItem = ({
   });
 
   const [statusSelect, setStatus] = useState(status);
+  const bgColor = statusColors[statusSelect];
 
   return (
     <Tr>
@@ -51,6 +62,7 @@ const OrderItem = ({
           value={statusSelect}
           onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
           placeholder={t(`status.placeholder`)}
+          bg={bgColor}
         >
           {statuses.map((status) => (
             <option key={status} value={status}>