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

ui improvemnt

Browse Source
This commit is contained in:
Marshal
2026-06-06 21:17:20 +00:00
parent b62ea3f95f
commit 08b46c306f
35 changed files with 2731 additions and 1604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingContainersCard.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Boxes } from "lucide-react";
import { Text, Badge, Box, Table } from "@mantine/core";
import { SectionCard } from "./SectionCard";
import type { BookingContainerView } from "./booking-detail.styles";
export interface BookingContainersCardProps {
containers: BookingContainerView[];
}
export function BookingContainersCard({ containers }: BookingContainersCardProps) {
return (
<SectionCard
icon={Boxes}
title="Containers & Cargo"
extra={
<Badge color="gray" variant="light" radius="sm">
{containers.length} line{containers.length === 1 ? "" : "s"}
</Badge>
}
>
<Box style={{ overflowX: "auto" }}>
<Table verticalSpacing="md" horizontalSpacing="md" highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>Container Type</Table.Th>
<Table.Th>Qty</Table.Th>
<Table.Th>VGM / Unit</Table.Th>
<Table.Th>Total VGM</Table.Th>
<Table.Th>Size</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{containers.map((container) => (
<Table.Tr key={container.id}>
<Table.Td>
<Text fw={600} size="sm">
{container.containerType?.label}
</Text>
</Table.Td>
<Table.Td>{container.quantity}</Table.Td>
<Table.Td>{container.vgmPerUnitTons} t</Table.Td>
<Table.Td>
<Text fw={600} c="green.7" size="sm">
{(container.quantity * container.vgmPerUnitTons).toFixed(2)} t
</Text>
</Table.Td>
<Table.Td>
<Badge color="gray" variant="light" radius="sm">
{container.containerType?.sizeFt}FT
</Badge>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Box>
</SectionCard>
);
}