124 lines
4.3 KiB
TypeScript
124 lines
4.3 KiB
TypeScript
import InstagramChanel from '@/../public/instagram.png';
|
|
import Logo from '@/../public/logo.jpeg';
|
|
import TelegramChanel from '@/../public/telegram.jpg';
|
|
import { Box, Typography } from '@mui/material';
|
|
import Image from 'next/image';
|
|
import { forwardRef } from 'react';
|
|
|
|
interface BoxesPrintProps {
|
|
boxData?: {
|
|
id: number;
|
|
box_name: string;
|
|
net_weight: number;
|
|
box_weight: number;
|
|
box_type: string;
|
|
box_size: string;
|
|
passportName: string;
|
|
status: string;
|
|
packetId: number;
|
|
partyId: number;
|
|
partyName: string;
|
|
passportId: string;
|
|
client_id: string;
|
|
clientName: string;
|
|
products_list: Array<{
|
|
id: number;
|
|
price: number;
|
|
cargoId: string;
|
|
trekId: string;
|
|
name: string;
|
|
nameRu: string;
|
|
amount: number;
|
|
acceptedNumber: number;
|
|
weight: number;
|
|
}>;
|
|
};
|
|
key: number | string;
|
|
}
|
|
|
|
const BoxesPrint = forwardRef<HTMLDivElement, BoxesPrintProps>(({ boxData, key }, ref) => {
|
|
return (
|
|
<Box
|
|
ref={ref}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100mm',
|
|
height: '100mm',
|
|
margin: '0 auto',
|
|
fontSize: '9px',
|
|
'@media print': {
|
|
width: '100mm',
|
|
height: '100mm',
|
|
},
|
|
}}
|
|
key={key}
|
|
>
|
|
<Box sx={{ border: '2px solid black', borderBottom: 'none' }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<Box
|
|
sx={{
|
|
color: '#fff',
|
|
padding: '4px',
|
|
display: 'flex',
|
|
// flexDirection: 'column',
|
|
gap: '12px',
|
|
}}
|
|
>
|
|
<Image alt='logo' src={Logo} width={55} height={55} priority unoptimized />
|
|
<Box
|
|
sx={{
|
|
color: '#fff',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '4px',
|
|
}}
|
|
>
|
|
<Typography sx={{ color: 'black', fontSize: '10px' }}>CPOST EXPRESS CARGO</Typography>
|
|
<Typography sx={{ color: 'black', fontSize: '10px' }}>
|
|
Reys: {boxData?.partyName}-{boxData?.client_id}
|
|
</Typography>
|
|
<Typography sx={{ color: 'black', fontSize: '10px' }}>TEL: +(998) 90 113 44 77</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: '10px', marginTop: '5px', marginRight: '5px' }}>
|
|
<Image alt='telegram' src={TelegramChanel} width={50} height={50} priority unoptimized />
|
|
<Image alt='instagram' src={InstagramChanel} width={50} height={50} priority unoptimized />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
border: '1px solid black',
|
|
borderTop: '1px solid black',
|
|
textAlign: 'start',
|
|
width: 'auto',
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
'@media print': {
|
|
pageBreakInside: 'avoid',
|
|
},
|
|
}}
|
|
>
|
|
{boxData?.products_list.map((list, index) => (
|
|
<Box
|
|
sx={{
|
|
border: '1px solid black',
|
|
textAlign: 'start',
|
|
width: 'auto',
|
|
padding: '4px',
|
|
}}
|
|
key={index}
|
|
>
|
|
<Typography sx={{ fontSize: '12px' }}>{list.trekId}</Typography>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
BoxesPrint.displayName = 'BoxesPrint';
|
|
|
|
export default BoxesPrint;
|