ui design for schedule

This commit is contained in:
Marshal
2026-06-09 23:25:52 +00:00
parent 5774d7db9d
commit 257428be18
19 changed files with 2088 additions and 408 deletions

View File

@@ -41,15 +41,20 @@ export function ScheduleBookingsStep({
onRemove?: (bookingId: string) => void;
}) {
return (
<Paper p="md" radius="xl" withBorder>
<Tabs defaultValue={assignedBookings.length ? "on-train" : "add"} radius="lg" variant="pills">
<Paper p="md" radius="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
<Tabs
defaultValue={assignedBookings.length ? "on-train" : "add"}
radius="md"
variant="pills"
color="green"
>
<Tabs.List mb="md">
<Tabs.Tab
value="on-train"
leftSection={<Train size={14} />}
rightSection={
assignedBookings.length ? (
<Badge size="xs" variant="light" color="teal" circle>
<Badge size="xs" variant="light" color="green" circle>
{assignedBookings.length}
</Badge>
) : undefined
@@ -71,9 +76,9 @@ export function ScheduleBookingsStep({
justify="space-between"
p="sm"
style={{
border: "1px solid var(--mantine-color-gray-3)",
borderRadius: 10,
background: "var(--mantine-color-teal-0)",
border: "1px solid var(--mantine-color-green-2)",
borderRadius: 12,
background: "var(--mantine-color-green-0)",
}}
>
<Stack gap={4}>
@@ -82,7 +87,7 @@ export function ScheduleBookingsStep({
{booking.reference}
</Text>
{booking.weightTons != null ? (
<Badge variant="outline" size="xs">
<Badge variant="outline" size="xs" color="green">
{booking.weightTons}T
</Badge>
) : null}
@@ -92,7 +97,7 @@ export function ScheduleBookingsStep({
Assigned to this consist
</Text>
<ArrowRight size={12} />
<Text size="xs" c="teal">
<Text size="xs" c="green.7" fw={500}>
Ready for wagon plan
</Text>
</Group>