Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-27 00:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix slip

Browse Source
This commit is contained in:
natib21
2026-06-20 13:38:01 +00:00
parent 3a86a63215
commit 7f389a4f42
1 changed files with 59 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
apps/edr-freight-web/backoffice/src/pages/operations/LastMilePage.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { type ReactNode, useMemo, useState } from "react";
import {
ArrowRight,
Eye,
@@ -199,7 +199,50 @@ const tripSlipRows = (job: LastMileJob): [string, string][] => [
["Delivery status", DELIVERY_STATUS_META[job.deliveryStatus].label],
];
const SignatureBlock = ({ title }: { title: string }) => (
const SampleStamp = () => (
<Box style={{ marginTop: 4, height: 96, display: "flex", alignItems: "center" }}>
<Box
style={{
width: 96,
height: 96,
borderRadius: "50%",
border: "2px solid var(--mantine-color-teal-7)",
transform: "rotate(-12deg)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Box
style={{
width: 82,
height: 82,
borderRadius: "50%",
border: "1px solid var(--mantine-color-teal-7)",
color: "var(--mantine-color-teal-7)",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
lineHeight: 1.1,
}}
>
<Text size="9px" fw={700} style={{ letterSpacing: 1 }}>
EDR FREIGHT
</Text>
<Text size="sm" fw={800}>
APPROVED
</Text>
<Text size="8px" fw={600}>
OPERATIONS
</Text>
</Box>
</Box>
</Box>
);
const SignatureBlock = ({ title, stamp }: { title: string; stamp?: ReactNode }) => (
<Stack gap="sm" style={{ flex: 1 }}>
<Text fw={600} size="sm">
{title}
@@ -216,21 +259,7 @@ const SignatureBlock = ({ title }: { title: string }) => (
</Text>
<Box style={{ flex: 1, borderBottom: "1px solid var(--mantine-color-gray-5)", height: 18 }} />
</Group>
<Box
style={{
marginTop: 4,
height: 90,
borderRadius: 8,
border: "1px dashed var(--mantine-color-gray-4)",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Text size="xs" c="dimmed" tt="uppercase" fw={600}>
Stamp
</Text>
</Box>
{stamp}
</Stack>
);
@@ -259,7 +288,7 @@ const TripSlipDocument = ({ job }: { job: LastMileJob }) => (
<Divider label="Acknowledgement" labelPosition="center" />
<Group align="flex-start" gap="xl" wrap="nowrap">
<SignatureBlock title="Driver" />
<SignatureBlock title="Operator" />
<SignatureBlock title="Operator" stamp={<SampleStamp />} />
</Group>
</Stack>
);
@@ -277,12 +306,16 @@ const buildTripSlipHtml = (job: LastMileJob) => {
`<tr><td class="lbl">${escapeHtml(label)}</td><td>${escapeHtml(value)}</td></tr>`,
)
.join("");
const signature = (title: string) => `
const signature = (title: string, withStamp: boolean) => `
<div class="sign-col">
<div class="sign-title">${title}</div>
<div class="sign-field"><span>Name:</span><span class="line"></span></div>
<div class="sign-field"><span>Signature:</span><span class="line"></span></div>
<div class="stamp">STAMP</div>
${
withStamp
? '<div class="stamp"><div class="ring"><div class="ring-inner"><span>EDR FREIGHT</span><strong>APPROVED</strong><span>OPERATIONS</span></div></div></div>'
: ""
}
</div>`;
return `<!doctype html><html><head><meta charset="utf-8" />
<title>Trip Slip ${escapeHtml(job.bookingRef)}</title>
@@ -302,14 +335,18 @@ const buildTripSlipHtml = (job: LastMileJob) => {
.sign-title { font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.sign-field { display: flex; gap: 6px; align-items: flex-end; font-size: 12px; color: #666; margin-bottom: 10px; }
.sign-field .line { flex: 1; border-bottom: 1px solid #888; height: 16px; }
.stamp { margin-top: 6px; height: 96px; border: 1px dashed #aaa; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 1px; color: #999; }
.stamp { margin-top: 6px; height: 96px; display: flex; align-items: center; }
.ring { width: 96px; height: 96px; border-radius: 50%; border: 2px solid #0c7a57; transform: rotate(-12deg); display: flex; align-items: center; justify-content: center; }
.ring-inner { width: 82px; height: 82px; border-radius: 50%; border: 1px solid #0c7a57; color: #0c7a57; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.ring-inner span { font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.ring-inner strong { font-size: 13px; font-weight: 800; }
</style></head>
<body onload="window.print()">
<div class="head"><h1>EDR Freight</h1><p>Last Mile Trip Slip</p></div>
<div class="meta"><span>${escapeHtml(job.bookingRef)}</span><span>${escapeHtml(job.requestedDate)}</span></div>
<table>${rows}</table>
<div class="ack">Acknowledgement</div>
<div class="signs">${signature("Driver")}${signature("Operator")}</div>
<div class="signs">${signature("Driver", false)}${signature("Operator", true)}</div>
</body></html>`;
};