init
This commit is contained in:
azizziy
@@ -0,0 +1,243 @@
|
||||
'use client';
|
||||
|
||||
import BaseModal from '@/components/ui-kit/BaseModal';
|
||||
import { Order } from '@/data/order/order.model';
|
||||
import { PartyStatus } from '@/data/party/party.model';
|
||||
import { useMyTranslation } from '@/hooks/useMyTranslation';
|
||||
import { getBoxStatusStyles } from '@/theme/getStatusBoxStyles';
|
||||
import { Box, Grid, Modal, Stack, SvgIcon, Typography, styled } from '@mui/material';
|
||||
import React from 'react';
|
||||
|
||||
const StyledBox = styled(Box)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.checkboxes-grid-label {
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #b2b2b2;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border: 1px solid #2d97ff;
|
||||
box-shadow: 0 0 0 1px #2d97ff;
|
||||
}
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
color: #11579b;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
margin-bottom: 8px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.calc-subtitle {
|
||||
color: #1e1e1e;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.delivery_type_label {
|
||||
padding: 5px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #709ac3;
|
||||
background: #fff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #3489e4;
|
||||
|
||||
span {
|
||||
color: #3489e4;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:has(input:checked) {
|
||||
border: 1px solid #2d97ff;
|
||||
box-shadow: 0 0 0 1px #2d97ff;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #11579b99;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
border-radius: 0 6px 6px 0;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 1px 1px inset #2d97ff;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
border-right: 1px solid #11579b99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 7px;
|
||||
border-radius: 6px;
|
||||
border: 1.38px solid rgba(17, 87, 155, 0.2);
|
||||
background: #3487e1;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
order: Order;
|
||||
};
|
||||
|
||||
const CheckOrderResultBox = ({ order }: Props) => {
|
||||
const t = useMyTranslation();
|
||||
|
||||
const calcData = (event: any) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledBox component={'form'} onSubmit={calcData}>
|
||||
<Typography variant='h5' fontWeight={600} marginRight={'auto'}>
|
||||
{t('product_name')}: {order.name}
|
||||
</Typography>
|
||||
<Grid container spacing={2} mb={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography>{t('cargo_id')}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
border: '1px solid #D8D8D8',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{order.cargoId}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography>{t('party_name')}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
border: '1px solid #D8D8D8',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{order.partyName}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography>{t('track_id')}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
border: '1px solid #D8D8D8',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{order.trekId}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography>{t('quantity')}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
border: '1px solid #D8D8D8',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{order.amount}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Typography>{t('weight')}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
border: '1px solid #D8D8D8',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{order.weight}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Stack spacing={1} alignSelf={'start'}>
|
||||
{order.dates.map(({ date, status }, index) => {
|
||||
return (
|
||||
<Stack direction={'row'} alignItems={'center'} spacing={2} key={status + index}>
|
||||
<span>{date}</span>:<Typography sx={{ ...getBoxStatusStyles(status as PartyStatus) }}>{t(status)}</Typography>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</StyledBox>
|
||||
);
|
||||
};
|
||||
|
||||
type CheckOrderModalProps = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
result: Order;
|
||||
};
|
||||
|
||||
const CheckOrderResultModal = ({ open, onClose, result }: CheckOrderModalProps) => {
|
||||
return (
|
||||
<BaseModal open={open} onClose={onClose} maxWidth='600px'>
|
||||
<CheckOrderResultBox order={result} />
|
||||
</BaseModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckOrderResultBox;
|
||||
export { CheckOrderResultModal };
|
||||
Reference in New Issue
Block a user