Enhance contract and booking request handling

This commit is contained in:
Marshal
2026-06-30 02:20:32 +00:00
parent d91389daac
commit a072f04450
8 changed files with 735 additions and 62 deletions

View File

@@ -289,16 +289,18 @@ export default function BookingRequestDetailPage() {
booking={booking}
mutations={mutations}
/>
<Button
fullWidth
variant="default"
leftSection={<Milestone size={16} />}
onClick={() =>
navigate(`/dashboard/bookings/${booking.id}/milestones`)
}
>
View clearance milestones
</Button>
{booking.customsClearingEnabled && (
<Button
fullWidth
variant="default"
leftSection={<Milestone size={16} />}
onClick={() =>
navigate(`/dashboard/bookings/${booking.id}/milestones`)
}
>
View clearance milestones
</Button>
)}
{showContractButton && (
<Button
fullWidth

View File

@@ -6,6 +6,7 @@ import {
Badge,
Box,
Button,
Grid,
Group,
Loader,
Modal,
@@ -24,6 +25,12 @@ import type { Freight } from "@edr/types";
import { PageContainer } from "@/components/page/PageContainer";
import { PageHeader } from "@/components/page/PageHeader";
import { SectionCard } from "@/components/bookings/detail/SectionCard";
import {
RequestCustomerCard,
RequestContractSummaryCard,
RequestRouteCargoCard,
RequestServiceTypeCard,
} from "@/components/contracts/detail/RequestDetailCards";
import { contractsService } from "@/services/contracts.service";
const fmtDate = (iso?: string | null) =>
@@ -167,49 +174,67 @@ export default function ShipmentRequestDetailPage() {
}
/>
<SectionCard icon={CalendarDays} title="Requested shipment">
<Stack gap="sm">
<Group justify="space-between">
<Text size="sm" c="dimmed">
Preferred date (informational)
</Text>
<Text size="sm" fw={600}>
{fmtDate(request.scheduledDate)}
</Text>
</Group>
<Box>
<Text size="sm" c="dimmed" mb={6}>
Quantities
</Text>
<Stack gap={4}>
{lineRows(request.requestedLines ?? {}).map((l, i) => (
<Badge
key={i}
variant="light"
color="edr-green"
radius="sm"
size="lg"
>
{l}
</Badge>
))}
</Stack>
</Box>
{request.notes ? (
<Box>
<Text size="sm" c="dimmed" mb={4}>
Customer note
</Text>
<Text size="sm">{request.notes}</Text>
</Box>
) : null}
{request.reviewNote ? (
<Alert color="red" variant="light" radius="md" mt="sm">
Rejected: {request.reviewNote}
</Alert>
) : null}
</Stack>
</SectionCard>
<Grid gap="lg">
{/* LEFT — the request itself + route/cargo scope */}
<Grid.Col span={{ base: 12, lg: 7 }}>
<Stack gap="lg">
<SectionCard icon={CalendarDays} title="Requested shipment">
<Stack gap="sm">
<Group justify="space-between">
<Text size="sm" c="dimmed">
Preferred date (informational)
</Text>
<Text size="sm" fw={600}>
{fmtDate(request.scheduledDate)}
</Text>
</Group>
<Box>
<Text size="sm" c="dimmed" mb={6}>
Quantities
</Text>
<Stack gap={4}>
{lineRows(request.requestedLines ?? {}).map((l, i) => (
<Badge
key={i}
variant="light"
color="edr-green"
radius="sm"
size="lg"
>
{l}
</Badge>
))}
</Stack>
</Box>
{request.notes ? (
<Box>
<Text size="sm" c="dimmed" mb={4}>
Customer note
</Text>
<Text size="sm">{request.notes}</Text>
</Box>
) : null}
{request.reviewNote ? (
<Alert color="red" variant="light" radius="md" mt="sm">
Rejected: {request.reviewNote}
</Alert>
) : null}
</Stack>
</SectionCard>
<RequestRouteCargoCard contract={request.contract} />
</Stack>
</Grid.Col>
{/* RIGHT — customer, contract + service-type context */}
<Grid.Col span={{ base: 12, lg: 5 }}>
<Stack gap="lg">
<RequestCustomerCard contract={request.contract} />
<RequestContractSummaryCard contract={request.contract} />
<RequestServiceTypeCard contract={request.contract} />
</Stack>
</Grid.Col>
</Grid>
</Stack>
<Modal