print added

src/routes/private/boxes-print/BoxesPrint.tsx

@@ -0,0 +1,118 @@
+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;
+        }>;
+    };
+}
+
+const BoxesPrint = forwardRef<HTMLDivElement, BoxesPrintProps>(({ boxData }, 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',
+                },
+            }}
+        >
+            <Box sx={{ border: '1px solid black' }}>
+                <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={30} height={30} 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}</Typography>
+                            <Typography sx={{ color: 'black', fontSize: '10px' }}>{boxData?.client_id}</Typography>
+                        </Box>
+                    </Box>
+                    <Box sx={{ display: 'flex', gap: '4px', marginTop: '5px', marginRight: '5px' }}>
+                        <Image alt='telegram' src={TelegramChanel} width={15} height={15} priority unoptimized />
+                        <Image alt='instagram' src={InstagramChanel} width={15} height={15} priority unoptimized />
+                        <Typography sx={{ color: 'black', fontSize: '8px' }}>TEL: +(998) 90 113 44 77</Typography>
+                    </Box>
+                </Box>
+                <Box
+                    sx={{
+                        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={{
+                                borderRight: '1px solid black',
+                                textAlign: 'start',
+                                width: 'auto',
+                                padding: '4px',
+                            }}
+                        >
+                            <Typography sx={{ fontSize: '12px' }}>{list.trekId}</Typography>
+                        </Box>
+                    ))}
+                </Box>
+            </Box>
+        </Box>
+    );
+});
+
+BoxesPrint.displayName = 'BoxesPrint';
+
+export default BoxesPrint;