feat: add fetch for multi-stub (#59)

src/components/OrderItem/OrderItem.tsx

@@ -3,6 +3,7 @@ import { Td, Tr, Link, Select } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 
+import { MasterProps } from '../MasterItem/MasterItem';
 import { getTimeSlot } from '../../lib';
 
 const statuses = [
@@ -24,6 +25,9 @@ export type OrderProps = {
   status?: GetArrItemType<typeof statuses>;
   phone?: string;
   location?: string;
+  master: MasterProps;
+  notes: '';
+  allMasters: MasterProps[];
 };
 
 type Status = (typeof statuses)[number];
@@ -44,6 +48,8 @@ const OrderItem = ({
   status,
   phone,
   location,
+  master,
+  allMasters,
 }: OrderProps) => {
   const { t } = useTranslation('~', {
     keyPrefix: 'dry-wash.arm.order',
@@ -51,6 +57,7 @@ const OrderItem = ({
 
   const [statusSelect, setStatus] = useState(status);
   const bgColor = statusColors[statusSelect];
+  const [masterSelect, setMaster] = useState(master?.name);
 
   return (
     <Tr>
@@ -71,6 +78,19 @@ const OrderItem = ({
           ))}
         </Select>
       </Td>
+      <Td>
+        <Select
+          value={masterSelect}
+          onChange={(e) => setMaster(e.target.value as OrderProps['status'])}
+          placeholder={t(`status.placeholder`)}
+        >
+          {allMasters.map((item) => (
+            <option key={item.id} value={item.name}>
+              {item.name}
+            </option>
+          ))}
+        </Select>
+      </Td>
       <Td>
         <Link href='tel:'>{phone}</Link>
       </Td>