This commit is contained in:
natib21
2026-07-02 09:41:52 +00:00
parent 07abe9b679
commit e0010695be
2 changed files with 72 additions and 66 deletions

View File

@@ -122,42 +122,45 @@ const InfoRow = ({ label, value }: { label: string; value: string }) => (
</Stack> </Stack>
); );
const BookingInfo = ({ record }: { record: FirstMileRecord }) => ( const BookingInfo = ({ record }: { record: FirstMileRecord }) => {
<Card radius="md" padding="md" withBorder bg="var(--mantine-color-gray-0)"> const hasPickupAddress = record.booking?.firstMilePickupAddress != null;
<Stack gap="sm"> return (
<Group justify="space-between"> <Card radius="md" padding="md" withBorder bg="var(--mantine-color-gray-0)">
<Text fw={600}>{bookingRef(record)}</Text> <Stack gap="sm">
<Group gap="xs"> <Group justify="space-between">
<Badge color={STATUS_META[record.status].color} variant="light" size="sm"> <Text fw={600}>{bookingRef(record)}</Text>
{STATUS_META[record.status].label} <Group gap="xs">
</Badge> <Badge color={STATUS_META[record.status].color} variant="light" size="sm">
<Badge {STATUS_META[record.status].label}
color={isAssigned(record) ? "green" : "orange"} </Badge>
variant="light" <Badge
size="sm" color={isAssigned(record) ? "green" : "orange"}
> variant="light"
{isAssigned(record) ? "Assigned" : "Unassigned"} size="sm"
</Badge> >
{isAssigned(record) ? "Assigned" : "Unassigned"}
</Badge>
</Group>
</Group> </Group>
</Group> <SimpleGrid cols={2} spacing="sm">
<SimpleGrid cols={2} spacing="sm"> <InfoRow label="Customer" value={customerName(record)} />
<InfoRow label="Customer" value={customerName(record)} /> <InfoRow label="Service type" value={serviceTypeName(record)} />
<InfoRow label="Service type" value={serviceTypeName(record)} /> {hasPickupAddress && <InfoRow label="Pickup location" value={pickupLocation(record)} />}
<InfoRow label="Pickup location" value={pickupLocation(record)} /> <InfoRow label="Destination (origin yard)" value={destinationYardName(record)} />
<InfoRow label="Destination (origin yard)" value={destinationYardName(record)} /> <InfoRow label="Cargo" value={cargoDesc(record)} />
<InfoRow label="Cargo" value={cargoDesc(record)} /> <InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} />
<InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} /> <InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} />
<InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} /> <InfoRow label="Contact" value={contactPersonName(record)} />
<InfoRow label="Contact" value={contactPersonName(record)} /> <InfoRow label="Phone" value={contactPhone(record)} />
<InfoRow label="Phone" value={contactPhone(record)} /> <InfoRow label="Requested date" value={requestedDate(record)} />
<InfoRow label="Requested date" value={requestedDate(record)} /> <InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} />
<InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} /> <InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} />
<InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} /> <InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} />
<InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} /> </SimpleGrid>
</SimpleGrid> </Stack>
</Stack> </Card>
</Card> );
); };
const tripSlipRows = (record: FirstMileRecord): [string, string][] => [ const tripSlipRows = (record: FirstMileRecord): [string, string][] => [
["Customer", customerName(record)], ["Customer", customerName(record)],

View File

@@ -117,38 +117,41 @@ const InfoRow = ({ label, value }: { label: string; value: string }) => (
</Stack> </Stack>
); );
const BookingInfo = ({ record }: { record: LastMileRecord }) => ( const BookingInfo = ({ record }: { record: LastMileRecord }) => {
<Card radius="md" padding="md" withBorder bg="var(--mantine-color-gray-0)"> const hasDeliveryAddress = record.booking?.lastMileDeliveryAddress != null;
<Stack gap="sm"> return (
<Group justify="space-between"> <Card radius="md" padding="md" withBorder bg="var(--mantine-color-gray-0)">
<Text fw={600}>{bookingRef(record)}</Text> <Stack gap="sm">
<Group gap="xs"> <Group justify="space-between">
<Badge color={STATUS_META[record.status].color} variant="light" size="sm"> <Text fw={600}>{bookingRef(record)}</Text>
{STATUS_META[record.status].label} <Group gap="xs">
</Badge> <Badge color={STATUS_META[record.status].color} variant="light" size="sm">
<Badge color={isAssigned(record) ? "green" : "orange"} variant="light" size="sm"> {STATUS_META[record.status].label}
{isAssigned(record) ? "Assigned" : "Unassigned"} </Badge>
</Badge> <Badge color={isAssigned(record) ? "green" : "orange"} variant="light" size="sm">
{isAssigned(record) ? "Assigned" : "Unassigned"}
</Badge>
</Group>
</Group> </Group>
</Group> <SimpleGrid cols={2} spacing="sm">
<SimpleGrid cols={2} spacing="sm"> <InfoRow label="Customer" value={customerName(record)} />
<InfoRow label="Customer" value={customerName(record)} /> <InfoRow label="Service type" value={serviceTypeName(record)} />
<InfoRow label="Service type" value={serviceTypeName(record)} /> <InfoRow label="Pickup (origin yard)" value={originYardName(record)} />
<InfoRow label="Pickup (origin yard)" value={originYardName(record)} /> {hasDeliveryAddress && <InfoRow label="Destination" value={deliveryLocation(record)} />}
<InfoRow label="Destination" value={deliveryLocation(record)} /> <InfoRow label="Cargo" value={cargoDesc(record)} />
<InfoRow label="Cargo" value={cargoDesc(record)} /> <InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} />
<InfoRow label="Advanced Payment" value={formatPrice(record.advancedPayment)} /> <InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} />
<InfoRow label="Post Payment" value={formatPrice(record.remainingPayment)} /> <InfoRow label="Contact" value={contactPersonName(record)} />
<InfoRow label="Contact" value={contactPersonName(record)} /> <InfoRow label="Phone" value={contactPhone(record)} />
<InfoRow label="Phone" value={contactPhone(record)} /> <InfoRow label="Requested date" value={requestedDate(record)} />
<InfoRow label="Requested date" value={requestedDate(record)} /> <InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} />
<InfoRow label="Assigned vehicle" value={vehicleLabel(record) ?? "—"} /> <InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} />
<InfoRow label="Est. Distance (KM)" value={record.estimatedKm != null ? String(record.estimatedKm) : "—"} /> <InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} />
<InfoRow label="Actual Distance (KM)" value={record.exactKm != null ? String(record.exactKm) : "—"} /> </SimpleGrid>
</SimpleGrid> </Stack>
</Stack> </Card>
</Card> );
); };
const tripSlipRows = (record: LastMileRecord): [string, string][] => [ const tripSlipRows = (record: LastMileRecord): [string, string][] => [
["Customer", customerName(record)], ["Customer", customerName(record)],