diff --git a/packages/fieldlens-core/src/features/codes/CodeLab.css b/packages/fieldlens-core/src/features/codes/CodeLab.css index c38b200..40f6f01 100644 --- a/packages/fieldlens-core/src/features/codes/CodeLab.css +++ b/packages/fieldlens-core/src/features/codes/CodeLab.css @@ -268,70 +268,220 @@ .pallet-production-sheet { box-sizing: border-box; width: 198mm; - min-height: 277mm; + height: 277mm; margin: 0 auto; - padding: 5mm; - border: 0; + padding: 4mm; + color: #111; + background: #fff; + font-family: Arial, Helvetica, sans-serif; break-inside: avoid-page; page-break-inside: avoid; } - .pallet-top-strip, - .pallet-bottom-strip { + .photo-sheet-layout { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: 64mm minmax(0, 1fr); + grid-template-rows: 43mm 48mm 103mm 64mm; + gap: 3mm 4mm; + } + + .photo-top-left { + grid-column: 1; + grid-row: 1 / span 2; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3mm; + min-height: 0; + } + + .photo-mini-ticket { + display: grid; + grid-template-rows: 39mm minmax(0, 1fr); gap: 2mm; - } - - .pallet-ticket { min-width: 0; - padding: 1.5mm 1mm; - border: .25mm solid #bbb; - text-align: center; } - .pallet-ticket canvas { - display: block; - width: 100%; - height: 11mm; - object-fit: contain; - } - - .pallet-ticket strong { - display: block; - margin-top: .5mm; - font: 700 8pt/1 Arial, Helvetica, sans-serif; - } - - .pallet-sheet-main { - display: grid; - grid-template-columns: 33mm minmax(0, 1fr) 36mm; - gap: 4mm; - align-items: stretch; - margin: 5mm 0; - } - - .pallet-size-panel { + .photo-mini-size, + .photo-main-size, + .photo-large-size { + position: relative; display: grid; place-items: center; - border: .4mm solid #222; - font: 700 48pt/1 Arial, Helvetica, sans-serif; + border: .35mm solid #333; + overflow: hidden; } - .pallet-card { - border: .4mm solid #222; - padding: 3mm; + .photo-mini-size strong { + font: 400 30pt/1 Arial, Helvetica, sans-serif; + transform: rotate(90deg); + } + + .photo-mini-size small, + .photo-main-size small, + .photo-large-size small { + position: absolute; + right: 3mm; + bottom: 2mm; + font: 700 9pt/1 Arial, Helvetica, sans-serif; + } + + .photo-mini-code, + .photo-tear-ticket { + display: grid; + grid-template-columns: minmax(0, 1fr) 12mm; + gap: 1mm; + align-items: stretch; + min-height: 0; + } + + .photo-rotated-barcode { + position: relative; + min-width: 0; + overflow: hidden; + } + + .photo-rotated-barcode canvas { + position: absolute; + left: 50%; + top: 50%; + width: 49mm; + height: 16mm; + max-width: none; + transform: translate(-50%, -50%) rotate(90deg); + transform-origin: center; + } + + .photo-yellow-id { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + background: #f2d51a; + color: #111; + font: 700 10pt/1 Arial, Helvetica, sans-serif; + white-space: nowrap; + writing-mode: vertical-rl; + transform: rotate(180deg); + } + + .photo-sheet-header { + position: relative; + grid-column: 2; + grid-row: 1; + min-width: 0; + } + + .photo-header-id { + position: relative; + z-index: 1; + display: flex; + align-items: baseline; + gap: 5mm; + height: 25mm; + padding: 1mm 3mm; + font: 400 28pt/1 Arial, Helvetica, sans-serif; + } + + .photo-header-id strong { + position: relative; + z-index: 2; + font-size: 33pt; + font-weight: 400; + letter-spacing: .4mm; + } + + .photo-header-id i { + position: absolute; + z-index: -1; + top: 0; + right: 0; + width: 54mm; + height: 16mm; + background: #f2d51a; + } + + .photo-brand-mark { + position: absolute; + right: 6mm; + bottom: 0; + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + align-items: end; + column-gap: 1mm; + color: #333; + transform: scale(.96); + transform-origin: right bottom; + } + + .photo-brand-script { + grid-row: 1 / span 2; + align-self: start; + margin-top: -1mm; + font: italic 12pt/1 Georgia, serif; + } + + .photo-brand-mark strong { + font: 400 17pt/1 Georgia, serif; + } + + .photo-brand-mark small { + justify-self: end; + font: 700 4.8pt/1.1 Arial, Helvetica, sans-serif; + letter-spacing: .9mm; + } + + .photo-main-size { + grid-column: 2; + grid-row: 2; + } + + .photo-main-size strong { + font: 400 74pt/.9 Arial, Helvetica, sans-serif; + } + + .photo-main-size small { + font-size: 15pt; + right: 4mm; + bottom: 3mm; + } + + .photo-large-size { + grid-column: 1; + grid-row: 3; + } + + .photo-large-size strong { + font: 400 56pt/.9 Arial, Helvetica, sans-serif; + transform: rotate(90deg); + } + + .photo-large-size small { + left: 4mm; + right: auto; + font-size: 12pt; + } + + .photo-pallet-card { + grid-column: 2; + grid-row: 3; + min-width: 0; + border: 0; + padding: 0; } .pallet-card-title { - margin-bottom: 2mm; - font: 700 14pt/1.1 Arial, Helvetica, sans-serif; + width: 52%; + margin: 0 0 2mm; + font: 700 12pt/1.1 Arial, Helvetica, sans-serif; + text-align: center; } .pallet-card-columns { display: grid; - grid-template-columns: 1fr 1.05fr; - gap: 3mm; + grid-template-columns: 1fr 1.03fr; + gap: 2mm; + height: calc(100% - 8mm); } .pallet-card-left, @@ -339,115 +489,179 @@ min-width: 0; } - .pallet-spec-table, - .pallet-run-table { + .pallet-spec-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .pallet-spec-table th, - .pallet-spec-table td, - .pallet-run-table th, - .pallet-run-table td { - border: .25mm solid #333; - padding: 1mm .8mm; + .pallet-spec-table td { + height: 7mm; + border: .28mm solid #333; + padding: .6mm .4mm; text-align: center; - font: 700 7.5pt/1.1 Arial, Helvetica, sans-serif; + font: 700 7.2pt/1 Arial, Helvetica, sans-serif; } - .pallet-spec-table th, - .pallet-run-table th { - font-size: 6.5pt; + .pallet-spec-table th { + font-size: 6.3pt; + font-weight: 400; } .pallet-card-left p { - margin: 2mm 0; - font: 9pt/1.2 Arial, Helvetica, sans-serif; + margin: 1.8mm 0; + font: 8.4pt/1.15 Arial, Helvetica, sans-serif; + } + + .pallet-card-left p b { + display: inline-block; + min-width: 17mm; + font-weight: 400; } .pallet-time { - margin-top: 4mm !important; + margin-top: 5mm !important; } .pallet-export-copy { - margin: 13mm 2mm 7mm; + margin: 20mm 2mm 6mm; text-align: center; - font: 8pt/1.25 Arial, Helvetica, sans-serif; + font: 7.4pt/1.25 Arial, Helvetica, sans-serif; + } + + .pallet-destination-line { + width: 92%; + margin: 0 auto 4mm; + border-bottom: .25mm dotted #555; } .pallet-signature { display: flex; align-items: end; gap: 2mm; - margin-top: 5mm; - font: 8pt/1 Arial, Helvetica, sans-serif; + margin: 0 1mm; + font: 7.5pt/1 Arial, Helvetica, sans-serif; } .pallet-signature span { flex: 1; - border-bottom: .25mm dotted #444; + border-bottom: .25mm dotted #555; + } + + .pallet-card-right { + position: relative; + margin-top: 8mm; + border: .35mm solid #333; + font-family: "Courier New", monospace; } .pallet-main-barcode { + position: absolute; + top: -18mm; + left: 50%; display: block; - width: 72%; - height: 15mm; - margin: 0 auto 2mm; + width: 54mm; + height: 17mm; object-fit: contain; + transform: translateX(-50%); } - .pallet-id-row, - .pallet-total-row { + .pallet-id-row { display: flex; justify-content: space-between; gap: 3mm; - padding: 1mm 0; - font: 10pt/1.2 "Courier New", monospace; + padding: 1.2mm 1.5mm 1mm; + font: 700 10.5pt/1.1 "Courier New", monospace; } .pallet-id-row strong { - font-size: 12pt; + font-size: 11.5pt; } - .pallet-run-table { - margin-top: 2mm; + .pallet-run-grid { + display: grid; + grid-template-columns: 1fr 2.2fr .72fr .62fr; + align-items: center; + padding: 0 1.2mm; + column-gap: 1mm; + } + + .pallet-run-head { + height: 7mm; + border-top: .2mm solid #777; + border-bottom: .2mm solid #777; + font: 7.3pt/1 "Courier New", monospace; + } + + .pallet-run-values { + height: 7mm; + font: 7pt/1 "Courier New", monospace; + } + + .pallet-run-head span:nth-child(3), + .pallet-run-head span:nth-child(4), + .pallet-run-values span:nth-child(3), + .pallet-run-values span:nth-child(4) { + text-align: right; } .pallet-total-row { - margin-top: 44mm; - border-top: .25mm solid #333; - font-size: 11pt; - } - - .pallet-hero-ticket { - display: grid; - grid-template-rows: 1fr auto; - align-items: center; - border: .4mm solid #222; - padding: 2mm; - } - - .pallet-hero-ticket canvas { - display: block; - width: 100%; - height: 34mm; - object-fit: contain; - } - - .pallet-hero-ticket div { + position: absolute; + right: 0; + bottom: 0; + left: 0; display: flex; - justify-content: center; - gap: 2mm; - align-items: baseline; - padding: 2mm 0; - background: #f3d923; - font: 700 13pt/1 Arial, Helvetica, sans-serif; + justify-content: space-between; + padding: 1.2mm 1.5mm .8mm; + border-top: .28mm solid #333; + font: 700 10.5pt/1 "Courier New", monospace; } - .pallet-hero-ticket strong { - font-size: 20pt; + .photo-large-ticket { + grid-column: 1; + grid-row: 4; + display: grid; + grid-template-columns: 18mm minmax(0, 1fr); + gap: 4mm; + min-height: 0; } + + .photo-yellow-id-large { + font-size: 16pt; + letter-spacing: .2mm; + } + + .photo-rotated-barcode-large canvas { + width: 57mm; + height: 24mm; + } + + .photo-bottom-tickets { + grid-column: 2; + grid-row: 4; + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 1.5mm; + align-items: end; + min-height: 0; + padding-top: 17mm; + } + + .photo-tear-ticket { + grid-template-columns: minmax(0, 1fr) 7mm; + height: 43mm; + } + + .photo-tear-ticket .photo-rotated-barcode canvas { + width: 36mm; + height: 11mm; + } + + .photo-tear-ticket .photo-yellow-id { + font-size: 6.5pt; + } + } @media (max-width: 760px) { diff --git a/packages/fieldlens-core/src/features/codes/CodeLab.tsx b/packages/fieldlens-core/src/features/codes/CodeLab.tsx index 3308ba7..91dd8d3 100644 --- a/packages/fieldlens-core/src/features/codes/CodeLab.tsx +++ b/packages/fieldlens-core/src/features/codes/CodeLab.tsx @@ -215,66 +215,115 @@ function PrintablePalletSheet({ fixture }: { fixture: PalletSheetFixture }) { }) }, [fixture]) - const tickets = Array.from({ length: 6 }, (_, index) => ( -