83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Td, Tr, Link, Select } from '@chakra-ui/react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import dayjs from 'dayjs';
|
|
|
|
import { getTimeSlot } from '../../lib';
|
|
|
|
const statuses = [
|
|
'pending' as const,
|
|
'progress' as const,
|
|
'working' as const,
|
|
'canceled' as const,
|
|
'complete' as const,
|
|
];
|
|
|
|
type GetArrItemType<ArrType> =
|
|
ArrType extends Array<infer ItemType> ? ItemType : never;
|
|
|
|
export type OrderProps = {
|
|
carNumber?: string;
|
|
startWashTime?: string;
|
|
endWashTime?: string;
|
|
orderDate?: string;
|
|
status?: GetArrItemType<typeof statuses>;
|
|
phone?: string;
|
|
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,
|
|
endWashTime,
|
|
orderDate,
|
|
status,
|
|
phone,
|
|
location,
|
|
}: OrderProps) => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash.arm.order',
|
|
});
|
|
|
|
const [statusSelect, setStatus] = useState(status);
|
|
const bgColor = statusColors[statusSelect];
|
|
|
|
return (
|
|
<Tr>
|
|
<Td>{carNumber}</Td>
|
|
<Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
|
|
<Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
|
|
<Td>
|
|
<Select
|
|
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}>
|
|
{t(`status.${status}`)}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</Td>
|
|
<Td>
|
|
<Link href='tel:'>{phone}</Link>
|
|
</Td>
|
|
<Td>{location}</Td>
|
|
</Tr>
|
|
);
|
|
};
|
|
|
|
export default OrderItem;
|