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

style: use the proper primary color

Browse Source
This commit is contained in:
Nathnael
2026-06-22 08:11:11 +00:00
parent ec708d85b3
commit feddce8a0c
62 changed files with 182 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx
View File

@@ -68,7 +68,7 @@ export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps
icon={ShieldCheck}
title="Approval chain"
extra={
<Badge color="green" variant="light" radius="sm">
<Badge color="edr-green" variant="light" radius="sm">
{steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
</Badge>
}
@@ -144,11 +144,11 @@ function StepRow({
const canApprove = canActOnApprovalStep(user, step, steps);
const statusColor =
step.status === "APPROVED"
? "green"
? "edr-green"
: step.status === "REJECTED"
? "red"
: isNext
? "green"
? "edr-green"
: "gray";
return (
@@ -200,7 +200,7 @@ function StepRow({
{canApprove && (
<Button
size="compact-sm"
color="green"
color="edr-green"
leftSection={<Check size={14} />}
disabled={isPending}
onClick={() => onApprove(step)}

4
apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx
View File

@@ -86,7 +86,7 @@ export function BookingActionsMenu({
key={action.id}
size="sm"
variant={action.primary && !destructive ? "filled" : "default"}
color={destructive ? "red" : action.primary ? "green" : "gray"}
color={destructive ? "red" : action.primary ? "edr-green" : "gray"}
leftSection={<Icon size={16} />}
disabled={mutations.isPending}
onClick={() => handleAction(action)}
@@ -113,7 +113,7 @@ export function BookingActionsMenu({
{variant === "table" && primary && (
<Button
size="compact-sm"
color="green"
color="edr-green"
visibleFrom="lg"
leftSection={<primary.icon size={14} />}
disabled={mutations.isPending}

2
apps/edr-freight-web/backoffice/src/components/bookings/BookingConfirmDialog.tsx
View File

@@ -49,7 +49,7 @@ export function BookingConfirmDialog({
const inputMissing =
(needsTextInput && !inputValue.trim()) || (needsFileInput && !selectedFile);
const isDestructive = action.variant === "destructive";
const accent = isDestructive ? "red" : "green";
const accent = isDestructive ? "red" : "edr-green";
return (
<Modal

2
apps/edr-freight-web/backoffice/src/components/bookings/BookingPricingSummary.tsx
View File

@@ -20,7 +20,7 @@ export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
<Text
size="xl"
fw={700}
c="green.9"
c="edr-green.9"
mt={4}
style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
>

2
apps/edr-freight-web/backoffice/src/components/bookings/BookingRequestsHeader.tsx
View File

@@ -62,7 +62,7 @@ export function BookingRequestsHeader({
return (
<Stack gap="lg">
<Group justify="flex-end" gap="sm">
<Button color="green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
<Button color="edr-green" radius="lg" leftSection={<Plus size={18} />} onClick={onCreate}>
Create booking
</Button>
<Button

4
apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusBadge.tsx
View File

@@ -8,7 +8,7 @@ const statusColorMap: Record<string, string> = {
CHANGES_REQUESTED: "orange",
PENDING_APPROVAL: "yellow",
APPROVED_PENDING_SIGNATURE: "cyan",
APPROVED: "green",
APPROVED: "edr-green",
CONTRACT_READY: "indigo",
SIGNED_CUSTOMER: "cyan",
FULLY_EXECUTED: "indigo",
@@ -16,7 +16,7 @@ const statusColorMap: Record<string, string> = {
PAYMENT_VERIFICATION_IN_PROGRESS: "yellow",
SELECTED_FOR_BATCH: "orange",
EXPIRED: "red",
PAID: "green",
PAID: "edr-green",
IN_TRANSIT: "cyan",
COMPLETED: "indigo",
REJECTED: "red",

4
apps/edr-freight-web/backoffice/src/components/bookings/BookingStatusTabs.tsx
View File

@@ -43,7 +43,7 @@ export function BookingStatusTabs({
value={active}
onChange={(value) => onChange((value as BookingStatusTabKey) ?? "all")}
variant="pills"
color="green"
color="edr-green"
keepMounted={false}
classNames={{ list: "ov-tablist", tab: "ov-tab" }}
>
@@ -62,7 +62,7 @@ export function BookingStatusTabs({
size="sm"
radius="sm"
variant={isActive ? "white" : "light"}
color={isActive ? "green" : "gray"}
color={isActive ? "edr-green" : "gray"}
styles={
isActive
? { root: { background: "rgba(255,255,255,0.9)", color: "#15805f" } }

2
apps/edr-freight-web/backoffice/src/components/bookings/BookingWorkflowStepper.tsx
View File

@@ -83,7 +83,7 @@ export function BookingWorkflowStepper({
<Text
size="xs"
fw={isActive ? 600 : 500}
c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
ta="center"
style={{ whiteSpace: "nowrap" }}
>

2
apps/edr-freight-web/backoffice/src/components/bookings/OperationsBookingQueue.tsx
View File

@@ -190,7 +190,7 @@ export function OperationsBookingQueue({
<Badge variant="light">{selected.length} selected</Badge>
<Button
size="compact-sm"
color="green"
color="edr-green"
disabled={!selected.length}
onClick={(e) => {
e.stopPropagation();

6
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingApprovalCard.tsx
View File

@@ -19,14 +19,14 @@ export function BookingApprovalCard({ steps, approvedCount }: BookingApprovalCar
<SectionCard
icon={CheckCircle}
title="Approval Workflow"
accent="green"
accent="edr-green"
extra={
<Badge color="green" variant="light" radius="sm">
<Badge color="edr-green" variant="light" radius="sm">
{approvedCount} / {steps.length} approved
</Badge>
}
>
<Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="green">
<Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="edr-green">
{steps.map((step) => (
<Timeline.Item
key={step.id}

2
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingDetailToolbar.tsx
View File

@@ -28,7 +28,7 @@ export function BookingDetailToolbar({
<Button variant="default" leftSection={<Download size={16} />} onClick={onExport}>
Export
</Button>
<Button color="green" leftSection={<CheckCircle size={16} />} onClick={onAction}>
<Button color="edr-green" leftSection={<CheckCircle size={16} />} onClick={onAction}>
Take Action
</Button>
</Group>

2
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingLifecycleStepper.tsx
View File

@@ -68,7 +68,7 @@ export function BookingLifecycleStepper({ status }: BookingLifecycleStepperProps
<Text
size="xs"
fw={isActive ? 600 : 500}
c={isActive ? "green.7" : isComplete ? "dark" : "dimmed"}
c={isActive ? "edr-green.7" : isComplete ? "dark" : "dimmed"}
ta="center"
style={{ whiteSpace: "nowrap" }}
>

2
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingPaymentCard.tsx
View File

@@ -29,7 +29,7 @@ export function BookingPaymentCard({
</Text>
</Group>
<Badge
color={paymentStatus === "PAID" ? "green" : "yellow"}
color={paymentStatus === "PAID" ? "edr-green" : "yellow"}
variant="light"
radius="sm"
mt="xs"

18
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx
View File

@@ -49,13 +49,7 @@ export function BookingRequestHero({
<Paper
radius="xl"
p="xl"
style={{
position: "relative",
overflow: "hidden",
background: "#ffffff",
border: "1px solid var(--mantine-color-gray-2)",
boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
}}
style={{ position: "relative", overflow: "hidden" }}
>
<Stack gap="lg" style={{ position: "relative" }}>
<Group justify="space-between" align="flex-start" wrap="wrap">
@@ -70,7 +64,7 @@ export function BookingRequestHero({
</Button>
<Button
variant="light"
color="green"
color="edr-green"
size="compact-sm"
radius="lg"
leftSection={<RefreshCw size={15} />}
@@ -87,7 +81,7 @@ export function BookingRequestHero({
Booking reference
</Text>
<Group gap="sm" align="center" wrap="wrap">
<Title order={2} fw={700} style={{ letterSpacing: "-0.4px", color: "#0f172a" }}>
<Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
{booking.reference}
</Title>
<BookingStatusBadge status={booking.status} />
@@ -130,7 +124,7 @@ export function BookingRequestHero({
minimumFractionDigits: 2,
})}`}
hint={booking.paymentStatus}
accent="green"
accent="edr-green"
/>
<HeroTile icon={Weight} label="Cargo weight" value={`${weight} T`} hint="VGM total" accent="blue" />
<HeroTile
@@ -177,7 +171,7 @@ function HeroTile({
label,
value,
hint,
accent = "green",
accent = "edr-green",
}: {
icon: LucideIcon;
label: string;
@@ -204,7 +198,7 @@ function HeroTile({
<Text size="xs" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: 0.4 }}>
{label}
</Text>
<Text fw={700} size="lg" lh={1.1} style={{ whiteSpace: "nowrap", color: "#0f172a" }}>
<Text fw={700} size="lg" lh={1.1} style={{ whiteSpace: "nowrap" }}>
{value}
</Text>
{hint ? (

2
apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingReviewNotesCard.tsx
View File

@@ -30,7 +30,7 @@ export function BookingReviewNotesCard({ notes }: BookingReviewNotesCardProps) {
</ThemeIcon>
<Stack gap={2} style={{ flex: 1 }}>
<Group justify="space-between">
<Badge color="green" variant="light" size="sm" radius="sm">
<Badge color="edr-green" variant="light" size="sm" radius="sm">
{note.type}
</Badge>
<Text size="xs" c="dimmed">

17
apps/edr-freight-web/backoffice/src/components/bookings/detail/SectionCard.tsx
View File

@@ -9,38 +9,29 @@ export interface SectionCardProps {
title: string;
/** Optional one-line context shown under the title. */
subtitle?: string;
/** Mantine palette key used to tint the icon chip + top accent (default green). */
/** Mantine palette key used to tint the icon chip (default brand green). */
accent?: string;
extra?: ReactNode;
children: ReactNode;
}
/** Consistent card with a colored icon chip + accent stripe header used by every detail section. */
/** Consistent card with a colored icon chip header used by every detail section. */
export function SectionCard({
icon: Icon,
title,
subtitle,
accent = "green",
accent = "edr-green",
extra,
children,
}: SectionCardProps) {
return (
<Paper radius="md" withBorder style={{ ...detailStyles.card, overflow: "hidden" }}>
<Box
style={{
height: 3,
background: `linear-gradient(90deg, var(--mantine-color-${accent}-5) 0%, var(--mantine-color-${accent}-7) 100%)`,
}}
/>
<Group
justify="space-between"
px="xl"
py="md"
wrap="nowrap"
style={{
...detailStyles.cardHeader,
background: `linear-gradient(180deg, var(--mantine-color-${accent}-0) 0%, white 100%)`,
}}
style={detailStyles.cardHeader}
>
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
<Box

4
apps/edr-freight-web/backoffice/src/components/fleet/FleetCardGrid.tsx
View File

@@ -94,8 +94,8 @@ const FleetCardGrid = ({
width: 40,
height: 40,
borderRadius: 10,
background: "var(--mantine-color-green-0)",
color: "var(--mantine-color-green-7)",
background: "var(--mantine-color-edr-green-0)",
color: "var(--mantine-color-edr-green-7)",
display: "flex",
alignItems: "center",
justifyContent: "center",

2
apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx
View File

@@ -195,7 +195,7 @@ const FleetFormDialog = ({
<Button variant="default" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button color="green" loading={isSubmitting} onClick={handleSubmit}>
<Button color="edr-green" loading={isSubmitting} onClick={handleSubmit}>
Save
</Button>
</Group>

4
apps/edr-freight-web/backoffice/src/components/fleet/FleetRecordActions.tsx
View File

@@ -35,7 +35,7 @@ const FleetRecordActions = ({
{showDetail ? (
<Button
variant="light"
color="green"
color="edr-green"
size="compact-sm"
radius="md"
onClick={handleDetail}
@@ -72,7 +72,7 @@ const FleetRecordActions = ({
<Group gap={4} wrap="nowrap" justify="flex-end">
{showDetail ? (
<Tooltip label="Manage wagons">
<ActionIcon variant="subtle" color="green" size="md" radius="md" onClick={handleDetail}>
<ActionIcon variant="subtle" color="edr-green" size="md" radius="md" onClick={handleDetail}>
<Truck size={16} />
</ActionIcon>
</Tooltip>

2
apps/edr-freight-web/backoffice/src/components/fleet/FleetToolbar.tsx
View File

@@ -93,7 +93,7 @@ const FleetToolbar = ({
/>
{onAdd ? (
<Button
color="green"
color="edr-green"
radius="lg"
size="sm"
fw={600}

2
apps/edr-freight-web/backoffice/src/components/overview/OverviewQuickLinks.tsx
View File

@@ -49,7 +49,7 @@ export function OverviewQuickLinks() {
>
<Group justify="space-between" align="flex-start" wrap="nowrap">
<Group align="flex-start" gap="sm" wrap="nowrap">
<ThemeIcon variant="light" color="green" size="lg" radius="md">
<ThemeIcon variant="light" color="edr-green" size="lg" radius="md">
<Icon size={18} />
</ThemeIcon>
<Stack gap={2}>

2
apps/edr-freight-web/backoffice/src/components/ruleEngine/ManageRuleEngineOrderDialog.tsx
View File

@@ -333,7 +333,7 @@ const ManageRuleEngineOrderDialog = ({
Cancel
</Button>
<Button
color="green"
color="edr-green"
onClick={handleSave}
disabled={isLoading || isSaving}
leftSection={

4
apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx
View File

@@ -240,7 +240,7 @@ const RuleEngineFormDialog = ({
checked={Boolean(values[field.name])}
onChange={(e) => setField(field.name, e.currentTarget.checked)}
size="md"
color="green"
color="edr-green"
/>
</Group>
);
@@ -387,7 +387,7 @@ const RuleEngineFormDialog = ({
) : undefined
}
radius="md"
color="green"
color="edr-green"
variant="filled"
fw={600}
size="md"

4
apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineToolbar.tsx
View File

@@ -52,7 +52,7 @@ const RuleEngineToolbar = ({
onChange={(value) => onViewModeChange(value as RuleEngineViewMode)}
size="sm"
radius="lg"
color="green"
color="edr-green"
data={[
{
value: "table",
@@ -101,7 +101,7 @@ const RuleEngineToolbar = ({
leftSection={<Plus size={18} />}
size="sm"
radius="lg"
color="green"
color="edr-green"
variant="filled"
fw={600}
style={{ whiteSpace: "nowrap" }}

4
apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineFormat.tsx
View File

@@ -39,7 +39,7 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
const active = Boolean(value);
return (
<Badge
color={active ? "green" : "gray"}
color={active ? "edr-green" : "gray"}
variant={active ? "filled" : "light"}
size="sm"
radius="md"
@@ -53,7 +53,7 @@ export const formatCell = (value: unknown, format?: ColumnFormat): ReactNode =>
const status = String(value);
const color =
status === "LIVE"
? "green"
? "edr-green"
: status === "DRAFT"
? "yellow"
: status === "PENDING_APPROVAL"

40
apps/edr-freight-web/backoffice/src/components/trainScheduling/AllocateBookingWizard.tsx
View File

@@ -447,27 +447,27 @@ export function AllocateBookingWizard({
if (key === "bookings") {
if (previewResult) {
return (
<Badge variant="light" color={previewResult.valid ? "green" : "red"} radius="sm">
<Badge variant="light" color={previewResult.valid ? "edr-green" : "red"} radius="sm">
{previewResult.valid ? "Plan valid" : "Has issues"}
</Badge>
);
}
return allBookingIds.length ? (
<Badge variant="light" color="green" radius="sm">
<Badge variant="light" color="edr-green" radius="sm">
{allBookingIds.length} selected
</Badge>
) : null;
}
if (key === "wagon" && displayWagonPlan.length) {
return (
<Badge variant="light" color="green" radius="sm">
<Badge variant="light" color="edr-green" radius="sm">
{displayWagonPlan.length} wagons
</Badge>
);
}
if (key === "container" && containerUnits.length) {
return (
<Badge variant="light" color={containerComplete ? "green" : "yellow"} radius="sm">
<Badge variant="light" color={containerComplete ? "edr-green" : "yellow"} radius="sm">
{containerUnits.length} units
</Badge>
);
@@ -577,7 +577,7 @@ export function AllocateBookingWizard({
size="sm"
/>
<Button
color="green"
color="edr-green"
radius="md"
leftSection={<Eye size={16} />}
loading={preview.isPending}
@@ -648,7 +648,7 @@ export function AllocateBookingWizard({
<Group>
{!hasContainerStep ? (
<Button
color="green"
color="edr-green"
radius="md"
loading={assign.isPending || create.isPending}
onClick={handleAssign}
@@ -657,7 +657,7 @@ export function AllocateBookingWizard({
</Button>
) : (
<Button
color="green"
color="edr-green"
radius="md"
rightSection={<ContainerIcon size={16} />}
onClick={() => setActiveStep(2)}
@@ -692,7 +692,7 @@ export function AllocateBookingWizard({
)}
<Group>
<Button
color="green"
color="edr-green"
radius="md"
loading={assign.isPending || create.isPending}
onClick={handleAssign}
@@ -732,7 +732,7 @@ export function AllocateBookingWizard({
style={{ background: scheduleBrand.softSurface, borderColor: scheduleBrand.mutedBorder }}
>
<Group gap="md" align="flex-start" wrap="nowrap">
<ThemeIcon size={44} radius="md" variant="light" color="green">
<ThemeIcon size={44} radius="md" variant="light" color="edr-green">
<CheckCircle2 size={22} />
</ThemeIcon>
<Stack gap={2} style={{ flex: 1 }}>
@@ -741,14 +741,14 @@ export function AllocateBookingWizard({
</Text>
<Text size="sm" c="dimmed">
Booking {booking.reference} is scheduled on train{" "}
<Text span fw={600} c="green.7">
<Text span fw={600} c="edr-green.7">
{assignedSchedule?.trainSet?.locomotive?.code ?? "—"}
</Text>
.
</Text>
<Group mt="sm">
<Button
color="green"
color="edr-green"
radius="md"
onClick={() => {
onClose();
@@ -777,14 +777,14 @@ export function AllocateBookingWizard({
style={{ background: scheduleBrand.softSurface, borderColor: scheduleBrand.mutedBorder }}
>
<Group gap="md" align="flex-start" wrap="nowrap">
<ThemeIcon size={44} radius="md" variant="light" color="green">
<ThemeIcon size={44} radius="md" variant="light" color="edr-green">
<CheckCircle2 size={22} />
</ThemeIcon>
<Stack gap={2}>
<Text fw={600}>Ready to finalize</Text>
<Text size="sm" c="dimmed">
Finalizing locks the plan, moves the schedule to{" "}
<Text span fw={600} c="green.7">
<Text span fw={600} c="edr-green.7">
SCHEDULED
</Text>
, and completes the booking allocation.
@@ -794,7 +794,7 @@ export function AllocateBookingWizard({
</Paper>
<Group>
<Button
color="green"
color="edr-green"
size="md"
radius="md"
leftSection={<CheckCircle2 size={18} />}
@@ -852,7 +852,7 @@ export function AllocateBookingWizard({
size={56}
radius="lg"
variant="white"
style={{ color: "var(--mantine-color-green-7)" }}
style={{ color: "var(--mantine-color-edr-green-7)" }}
>
<Train size={28} />
</ThemeIcon>
@@ -884,7 +884,7 @@ export function AllocateBookingWizard({
size="lg"
radius="sm"
variant="white"
c={previewResult.valid ? "green.8" : "red.7"}
c={previewResult.valid ? "edr-green.8" : "red.7"}
leftSection={
<Box
w={8}
@@ -892,7 +892,7 @@ export function AllocateBookingWizard({
style={{
borderRadius: 999,
background: previewResult.valid
? "var(--mantine-color-green-6)"
? "var(--mantine-color-edr-green-6)"
: "var(--mantine-color-red-6)",
}}
/>
@@ -941,7 +941,7 @@ export function AllocateBookingWizard({
size={44}
radius="md"
variant="gradient"
gradient={{ from: "green", to: "teal", deg: 135 }}
gradient={{ from: "edr-green", to: "teal", deg: 135 }}
>
<RouteIcon size={22} />
</ThemeIcon>
@@ -959,9 +959,9 @@ export function AllocateBookingWizard({
size={64}
thickness={6}
roundCaps
sections={[{ value: progressPct, color: "green" }]}
sections={[{ value: progressPct, color: "edr-green" }]}
label={
<Text ta="center" size="xs" fw={700} c="green.7">
<Text ta="center" size="xs" fw={700} c="edr-green.7">
{progressPct}%
</Text>
}

6
apps/edr-freight-web/backoffice/src/components/trainScheduling/ContainerPlacementGrid.tsx
View File

@@ -120,7 +120,7 @@ export function ContainerPlacementGrid({
value={progress}
size="sm"
radius="xl"
color={issues.length ? "yellow" : "green"}
color={issues.length ? "yellow" : "edr-green"}
/>
</Stack>
</Paper>
@@ -135,7 +135,7 @@ export function ContainerPlacementGrid({
</Stack>
) : (
<Badge
color="green"
color="edr-green"
variant="light"
size="sm"
w="fit-content"
@@ -163,7 +163,7 @@ export function ContainerPlacementGrid({
{unit.label} · {unit.containerTypeCode} · {unit.grossWeightTons}T
</Text>
</Stack>
<Badge size="sm" variant="light" color={isComplete ? "green" : "gray"}>
<Badge size="sm" variant="light" color={isComplete ? "edr-green" : "gray"}>
{isComplete ? "Ready" : "Pending"}
</Badge>
</Group>

8
apps/edr-freight-web/backoffice/src/components/trainScheduling/EligibleBookingsPanel.tsx
View File

@@ -37,14 +37,14 @@ function EligibleBookingRow({
p="sm"
style={{
border: `1px solid ${
selected ? "var(--mantine-color-green-3)" : "var(--mantine-color-gray-2)"
selected ? "var(--mantine-color-edr-green-3)" : "var(--mantine-color-gray-2)"
}`,
borderRadius: 12,
background: selected ? "var(--mantine-color-green-0)" : "white",
background: selected ? "var(--mantine-color-edr-green-0)" : "white",
transition: "border-color 120ms ease, background 120ms ease",
}}
>
<Checkbox checked={selected} onChange={onToggle} mt={4} color="green" />
<Checkbox checked={selected} onChange={onToggle} mt={4} color="edr-green" />
<Stack gap={4} style={{ flex: 1 }}>
<Group gap="xs" wrap="wrap">
<Package size={14} />
@@ -205,7 +205,7 @@ export function EligibleBookingsPanel({
</Text>
</Stack>
<Group gap="xs" onClick={(e) => e.stopPropagation()}>
<Badge variant="light" color="green">
<Badge variant="light" color="edr-green">
{selectedInBucket.length} selected
</Badge>
<Button

6
apps/edr-freight-web/backoffice/src/components/trainScheduling/FleetAvailabilitySummary.tsx
View File

@@ -43,7 +43,7 @@ export function FleetAvailabilitySummary({
</Text>
</Stack>
</Group>
<Badge variant="light" color={totalShortfall > 0 ? "yellow" : "green"}>
<Badge variant="light" color={totalShortfall > 0 ? "yellow" : "edr-green"}>
{fillRate}% fleet coverage
</Badge>
</Group>
@@ -59,7 +59,7 @@ export function FleetAvailabilitySummary({
value={fillRate}
size="sm"
radius="xl"
color={totalShortfall > 0 ? "yellow" : "green"}
color={totalShortfall > 0 ? "yellow" : "edr-green"}
/>
</Stack>
) : null}
@@ -86,7 +86,7 @@ export function FleetAvailabilitySummary({
{row.shortfall}
</Badge>
) : (
<Text size="sm" c="green">
<Text size="sm" c="edr-green">
0
</Text>
)}

4
apps/edr-freight-web/backoffice/src/components/trainScheduling/RouteCorridorTrack.tsx
View File

@@ -143,7 +143,7 @@ export function RouteCorridorTrack({
fw={passed ? 700 : 600}
ta="center"
lineClamp={2}
c={passed ? "green.8" : "dimmed"}
c={passed ? "edr-green.8" : "dimmed"}
>
{station.label}
</Text>
@@ -172,7 +172,7 @@ export function RouteCorridorTrack({
<Button
size="compact-xs"
radius="md"
color={isFinal ? "teal" : "green"}
color={isFinal ? "teal" : "edr-green"}
variant={isFinal ? "filled" : "light"}
loading={loggingSeq === station.sequenceNo}
onClick={() => onLogCheckpoint?.(station.sequenceNo)}

10
apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleBatchPanel.tsx
View File

@@ -26,7 +26,7 @@ interface ScheduleBatchPanelProps {
}
const windowColor: Record<string, string> = {
OPEN: "green",
OPEN: "edr-green",
FULL: "orange",
CLOSED: "gray",
};
@@ -68,7 +68,7 @@ export function ScheduleBatchPanel({ schedule }: ScheduleBatchPanelProps) {
<Paper radius="lg" withBorder p="lg" style={{ borderColor: "var(--mantine-color-gray-2)" }}>
<Group justify="space-between" align="center" mb="md" wrap="wrap">
<Group gap="sm">
<ThemeIcon size={36} radius="md" variant="light" color="green">
<ThemeIcon size={36} radius="md" variant="light" color="edr-green">
<Layers size={18} />
</ThemeIcon>
<div>
@@ -90,7 +90,7 @@ export function ScheduleBatchPanel({ schedule }: ScheduleBatchPanelProps) {
<Button
size="compact-sm"
variant="light"
color="green"
color="edr-green"
leftSection={<PlayCircle size={15} />}
loading={actions.runBatch.isPending}
onClick={() => run(actions.runBatch.mutateAsync(schedule.id), "Batch fill run")}
@@ -169,7 +169,7 @@ export function ScheduleBatchPanel({ schedule }: ScheduleBatchPanelProps) {
<Button
size="compact-xs"
variant="light"
color="green"
color="edr-green"
leftSection={<CheckCircle2 size={13} />}
onClick={() => run(actions.markPaid.mutateAsync(b.id), "Marked paid")}
>
@@ -228,7 +228,7 @@ export function ScheduleBatchPanel({ schedule }: ScheduleBatchPanelProps) {
Cancel
</Button>
<Button
color="green"
color="edr-green"
disabled={!moveTarget}
loading={actions.moveSchedule.isPending}
onClick={() => {

12
apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleBookingsStep.tsx
View File

@@ -46,7 +46,7 @@ export function ScheduleBookingsStep({
defaultValue={assignedBookings.length ? "on-train" : "add"}
radius="md"
variant="pills"
color="green"
color="edr-green"
>
<Tabs.List mb="md">
<Tabs.Tab
@@ -54,7 +54,7 @@ export function ScheduleBookingsStep({
leftSection={<Train size={14} />}
rightSection={
assignedBookings.length ? (
<Badge size="xs" variant="light" color="green" circle>
<Badge size="xs" variant="light" color="edr-green" circle>
{assignedBookings.length}
</Badge>
) : undefined
@@ -76,9 +76,9 @@ export function ScheduleBookingsStep({
justify="space-between"
p="sm"
style={{
border: "1px solid var(--mantine-color-green-2)",
border: "1px solid var(--mantine-color-edr-green-2)",
borderRadius: 12,
background: "var(--mantine-color-green-0)",
background: "var(--mantine-color-edr-green-0)",
}}
>
<Stack gap={4}>
@@ -87,7 +87,7 @@ export function ScheduleBookingsStep({
{booking.reference}
</Text>
{booking.weightTons != null ? (
<Badge variant="outline" size="xs" color="green">
<Badge variant="outline" size="xs" color="edr-green">
{booking.weightTons}T
</Badge>
) : null}
@@ -97,7 +97,7 @@ export function ScheduleBookingsStep({
Assigned to this consist
</Text>
<ArrowRight size={12} />
<Text size="xs" c="green.7" fw={500}>
<Text size="xs" c="edr-green.7" fw={500}>
Ready for wagon plan
</Text>
</Group>

2
apps/edr-freight-web/backoffice/src/components/trainScheduling/ScheduleWarningsAlert.tsx
View File

@@ -54,7 +54,7 @@ export function PreviewSummary({
{ label: "Train length", value: `${summary.totalLengthMeters}m` },
];
return (
<Paper p="md" radius="xl" withBorder bg="green.0">
<Paper p="md" radius="xl" withBorder bg="edr-green.0">
<Text size="sm" fw={600} mb="sm">
Plan summary
</Text>

6
apps/edr-freight-web/backoffice/src/components/trainScheduling/SchedulingWorkflowHeader.tsx
View File

@@ -49,7 +49,7 @@ export function SchedulingWorkflowHeader({
>
<Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
<Group gap="md" align="flex-start">
<ThemeIcon size={42} radius="xl" variant="gradient" gradient={{ from: "green", to: "teal", deg: 135 }}>
<ThemeIcon size={42} radius="xl" variant="gradient" gradient={{ from: "edr-green", to: "teal", deg: 135 }}>
<Icon size={20} />
</ThemeIcon>
<Stack gap={4}>
@@ -63,7 +63,7 @@ export function SchedulingWorkflowHeader({
) : null}
</Stack>
</Group>
<Badge size="lg" variant="light" color="green">
<Badge size="lg" variant="light" color="edr-green">
Step {activeStep + 1} of {totalSteps}
</Badge>
</Group>
@@ -83,7 +83,7 @@ export function SchedulingWorkflowHeader({
{progress}%
</Text>
</Group>
<Progress value={progress} size="sm" radius="xl" color="green" />
<Progress value={progress} size="sm" radius="xl" color="edr-green" />
</Stack>
</Paper>
);

10
apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
View File

@@ -618,18 +618,18 @@ export function TrainCompositionDiagram({
p="sm"
style={{
borderRadius: 12,
background: "linear-gradient(135deg, var(--mantine-color-green-0), #F2FBF7)",
border: "1px solid var(--mantine-color-green-1)",
background: "linear-gradient(135deg, var(--mantine-color-edr-green-0), #F2FBF7)",
border: "1px solid var(--mantine-color-edr-green-1)",
}}
>
<Group justify="space-between" mb={6}>
<Group gap={6} wrap="nowrap">
<Gauge size={14} color={freightBrand.primary} />
<Text size="xs" fw={700} c="green.8">
<Text size="xs" fw={700} c="edr-green.8">
Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
</Text>
</Group>
<Text size="sm" fw={800} c={stats.pullUtil > 95 ? "red.7" : "green.7"}>
<Text size="sm" fw={800} c={stats.pullUtil > 95 ? "red.7" : "edr-green.7"}>
{stats.pullUtil}%
</Text>
</Group>
@@ -639,7 +639,7 @@ export function TrainCompositionDiagram({
radius="xl"
striped={stats.pullUtil > 95}
animated={stats.pullUtil > 95}
color={stats.pullUtil > 95 ? "red" : stats.pullUtil > 80 ? "yellow" : "green"}
color={stats.pullUtil > 95 ? "red" : stats.pullUtil > 80 ? "yellow" : "edr-green"}
/>
</Box>
) : null}

2
apps/edr-freight-web/backoffice/src/components/trainScheduling/WagonPlanGrid.tsx
View File

@@ -133,7 +133,7 @@ export function WagonPlanGrid({
value={utilization}
size="sm"
radius="xl"
color={utilization > 95 ? "red" : utilization > 80 ? "yellow" : "green"}
color={utilization > 95 ? "red" : utilization > 80 ? "yellow" : "edr-green"}
/>
</Stack>
) : null}

10
apps/edr-freight-web/backoffice/src/components/trainScheduling/WorkflowStep.tsx
View File

@@ -123,13 +123,13 @@ export function WorkflowStep({
<Text
size="xs"
fw={700}
c={isComplete || isActive ? "green.7" : "dimmed"}
c={isComplete || isActive ? "edr-green.7" : "dimmed"}
style={{ letterSpacing: 0.6 }}
>
STEP {index + 1}
</Text>
{isComplete ? (
<Badge size="xs" variant="light" color="green" radius="sm">
<Badge size="xs" variant="light" color="edr-green" radius="sm">
Done
</Badge>
) : null}
@@ -155,10 +155,10 @@ export function WorkflowStep({
height: 28,
borderRadius: 8,
background: open
? "var(--mantine-color-green-0)"
? "var(--mantine-color-edr-green-0)"
: "var(--mantine-color-gray-1)",
color: open
? "var(--mantine-color-green-7)"
? "var(--mantine-color-edr-green-7)"
: "var(--mantine-color-gray-6)",
}}
>
@@ -209,7 +209,7 @@ export function WorkflowRail({ children }: { children: ReactNode }) {
bottom: 24,
width: 2,
background:
"linear-gradient(180deg, var(--mantine-color-green-3) 0%, var(--mantine-color-gray-3) 100%)",
"linear-gradient(180deg, var(--mantine-color-edr-green-3) 0%, var(--mantine-color-gray-3) 100%)",
borderRadius: 2,
pointerEvents: "none",
}}

4
apps/edr-freight-web/backoffice/src/components/trainScheduling/batchVisuals.tsx
View File

@@ -27,7 +27,7 @@ export const PIPELINE_STAGES: ReadonlyArray<{
{
key: "allocated",
label: "Allocated",
color: "green",
color: "edr-green",
hint: "Assigned to wagons on the train",
},
{
@@ -137,7 +137,7 @@ export function BookingPipeline({
}
const WINDOW_META: Record<string, { color: string; label: string; pulse: boolean }> = {
OPEN: { color: "green", label: "Window open", pulse: true },
OPEN: { color: "edr-green", label: "Window open", pulse: true },
FULL: { color: "orange", label: "Full", pulse: false },
CLOSED: { color: "gray", label: "Closed", pulse: false },
};

4
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/AssignedBookingsPanel.tsx
View File

@@ -95,7 +95,7 @@ export const AssignedBookingsPanel = ({
}}
>
<Group gap={8} wrap="nowrap" align="flex-start">
<ThemeIcon size={30} radius="md" variant="light" color="green">
<ThemeIcon size={30} radius="md" variant="light" color="edr-green">
<Package size={16} />
</ThemeIcon>
<Box style={{ flex: 1, minWidth: 0 }}>
@@ -107,7 +107,7 @@ export const AssignedBookingsPanel = ({
<Badge
size="xs"
variant="light"
color="green"
color="edr-green"
leftSection={<TrainFront size={9} />}
>
{wagonCountByBooking.get(booking.id)}

4
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/BookingDetailModal.tsx
View File

@@ -43,7 +43,7 @@ function InfoRow({
return (
<Group justify="space-between" wrap="nowrap" gap="md">
<Group gap={8} wrap="nowrap">
<ThemeIcon size={28} radius="md" variant="light" color="green">
<ThemeIcon size={28} radius="md" variant="light" color="edr-green">
{icon}
</ThemeIcon>
<Text size="sm" c="dimmed">
@@ -146,7 +146,7 @@ export const BookingDetailModal = ({
bookingWagons.length ? (
<Group gap={4} justify="flex-end">
{bookingWagons.map((w) => (
<Badge key={w.id} size="sm" variant="outline" color="green" radius="sm">
<Badge key={w.id} size="sm" variant="outline" color="edr-green" radius="sm">
#{w.sequenceNo}
</Badge>
))}

6
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/CompositionBookingTabs.tsx
View File

@@ -29,7 +29,7 @@ interface CompositionBookingTabsProps {
type TabKey = "assigned" | "unassigned" | "payment" | "expired" | "removed";
const TAB_META: Record<TabKey, { label: string; icon: LucideIcon; color: string }> = {
assigned: { label: "Assigned to train", icon: PackageCheck, color: "green" },
assigned: { label: "Assigned to train", icon: PackageCheck, color: "edr-green" },
unassigned: { label: "Unassigned (ready to load)", icon: PackagePlus, color: "orange" },
payment: { label: "Awaiting payment", icon: CreditCard, color: "orange" },
expired: { label: "Expired bookings", icon: XCircle, color: "red" },
@@ -152,7 +152,7 @@ export const CompositionBookingTabs = ({
value={tab}
onChange={(v) => v && setTab(v as TabKey)}
variant="default"
color="green"
color="edr-green"
style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}
>
<Tabs.List grow>
@@ -220,7 +220,7 @@ export const CompositionBookingTabs = ({
}}
>
<Group gap={5} wrap="nowrap">
<PackageCheck size={13} color="var(--mantine-color-green-7)" />
<PackageCheck size={13} color="var(--mantine-color-edr-green-7)" />
<Text size="xs" c="dimmed">
{assignedCount} on train
</Text>

2
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/RemoveBookingConfirmModal.tsx
View File

@@ -60,7 +60,7 @@ export const RemoveBookingConfirmModal = ({
<Text fw={800} size="sm">
{target?.reference ?? "Booking"}
</Text>
<Badge variant="light" color="green" leftSection={<TrainFront size={10} />}>
<Badge variant="light" color="edr-green" leftSection={<TrainFront size={10} />}>
{target?.wagonCount ?? 0} wagon{target?.wagonCount === 1 ? "" : "s"}
</Badge>
</Group>

2
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/TrainConsistView.tsx
View File

@@ -165,7 +165,7 @@ export const TrainConsistView = ({
{selectedWagon ? (
<Box>
<Group gap={6} mb={6} wrap="nowrap">
<Badge variant="light" color="green" radius="sm">
<Badge variant="light" color="edr-green" radius="sm">
Editing wagon #{selectedWagon.sequenceNo}
</Badge>
<Text size="xs" c="dimmed">

16
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/UnassignedBookingsPanel.tsx
View File

@@ -48,18 +48,18 @@ const YardFleetBanner = ({ fleetAtOrigin }: { fleetAtOrigin: FleetAvailabilityRo
py={6}
style={{
borderRadius: 8,
background: "var(--mantine-color-green-0)",
border: "1px solid var(--mantine-color-green-1)",
background: "var(--mantine-color-edr-green-0)",
border: "1px solid var(--mantine-color-edr-green-1)",
}}
>
<Group gap={5} wrap="nowrap">
<MapPin size={13} color="var(--mantine-color-green-7)" />
<Text size="xs" fw={700} c="green.8">
<MapPin size={13} color="var(--mantine-color-edr-green-7)" />
<Text size="xs" fw={700} c="edr-green.8">
Origin yard
</Text>
</Group>
{fleetAtOrigin.map((row) => (
<Badge key={row.wagonTypeId} size="sm" variant="light" color="green">
<Badge key={row.wagonTypeId} size="sm" variant="light" color="edr-green">
{row.wagonTypeCode}: {row.available}
</Badge>
))}
@@ -148,7 +148,7 @@ export const UnassignedBookingsPanel = ({
}
style={{
cursor: "pointer",
borderColor: isActive ? "var(--mantine-color-green-5)" : undefined,
borderColor: isActive ? "var(--mantine-color-edr-green-5)" : undefined,
}}
>
<Stack gap={6}>
@@ -162,7 +162,7 @@ export const UnassignedBookingsPanel = ({
{booking.reference}
</Text>
{booking.priorityScore ? (
<Badge size="xs" color="green">
<Badge size="xs" color="edr-green">
P{booking.priorityScore}
</Badge>
) : null}
@@ -194,7 +194,7 @@ export const UnassignedBookingsPanel = ({
<Button
size="xs"
variant="light"
color="green"
color="edr-green"
disabled={!fits}
onClick={(e) => {
e.stopPropagation();

6
apps/edr-freight-web/backoffice/src/components/trainScheduling/compositionEditor/WagonCard.tsx
View File

@@ -47,7 +47,7 @@ export const WagonCard = ({
<Card.Section withBorder inheritPadding py="xs" style={{ background: freightBrand.mutedBg }}>
<Group justify="space-between">
<Group gap={6}>
<ThemeIcon size={28} radius="md" variant="white" color="green">
<ThemeIcon size={28} radius="md" variant="white" color="edr-green">
<TrainFront size={16} />
</ThemeIcon>
<div>
@@ -55,7 +55,7 @@ export const WagonCard = ({
<Text size="sm" fw={800}>
Wagon #{wagon.sequenceNo}
</Text>
<Badge size="xs" variant="light" color="green">
<Badge size="xs" variant="light" color="edr-green">
{wagonType}
</Badge>
</Group>
@@ -142,7 +142,7 @@ export const WagonCard = ({
</Group>
<Progress
value={Math.min(weightPercent, 100)}
color={weightPercent > 90 ? "red" : weightPercent > 75 ? "orange" : "green"}
color={weightPercent > 90 ? "red" : weightPercent > 75 ? "orange" : "edr-green"}
size="sm"
radius="xl"
/>

8
apps/edr-freight-web/backoffice/src/components/trainScheduling/schedulingWorkflow.styles.ts
View File

@@ -2,7 +2,7 @@ import type { MantineTheme } from "@mantine/core";
export const schedulingWorkflow = {
stepper: {
color: "green" as const,
color: "edr-green" as const,
iconSize: 32,
size: "sm" as const,
},
@@ -12,11 +12,11 @@ export const schedulingWorkflow = {
withBorder: true,
},
heroGradient: (theme: MantineTheme) =>
`linear-gradient(135deg, ${theme.colors.green[0]} 0%, ${theme.white} 55%, ${theme.colors.gray[0]} 100%)`,
`linear-gradient(135deg, ${theme.colors["edr-green"][0]} 0%, ${theme.white} 55%, ${theme.colors.gray[0]} 100%)`,
workflowGradient: (theme: MantineTheme) =>
`linear-gradient(180deg, ${theme.white} 0%, ${theme.colors.gray[0]} 100%)`,
accentColor: "green" as const,
successColor: "green" as const,
accentColor: "edr-green" as const,
successColor: "edr-green" as const,
warningColor: "yellow" as const,
};

4
apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx
View File

@@ -56,7 +56,7 @@ export function AssignWagonDialog({ trainId }: { trainId: string }) {
return (
<>
<Button
color="green"
color="edr-green"
size="sm"
radius="lg"
leftSection={<Plus size={16} />}
@@ -91,7 +91,7 @@ export function AssignWagonDialog({ trainId }: { trainId: string }) {
<Button variant="default" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button color="green" loading={assign.isPending} onClick={handleAssign}>
<Button color="edr-green" loading={assign.isPending} onClick={handleAssign}>
Assign
</Button>
</Group>

4
apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
View File

@@ -15,7 +15,7 @@ const INVOICE_STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
DRAFT: 'gray',
ISSUED: 'orange',
PARTIALLY_PAID: 'yellow',
PAID: 'green',
PAID: 'edr-green',
CANCELLED: 'gray',
};
@@ -175,7 +175,7 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
<Button
variant="light"
color="green"
color="edr-green"
leftSection={<DoorOpen size={16} />}
loading={gateClear.isPending}
onClick={handleGateClearance}

2
apps/edr-freight-web/backoffice/src/components/warehouses/InspectionReportModal.tsx
View File

@@ -205,7 +205,7 @@ export function InspectionReportModal({ opened, onClose, inventoryId }: Inspecti
<Button variant="default" onClick={onClose} disabled={submitting}>
Cancel
</Button>
<Button color="green" onClick={handleSubmit} loading={submitting} disabled={!inventoryId}>
<Button color="edr-green" onClick={handleSubmit} loading={submitting} disabled={!inventoryId}>
Save report
</Button>
</Group>

2
apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
View File

@@ -30,7 +30,7 @@ const actionColor: Record<InventoryAction, string> = {
reserve: 'grape',
'ready-for-loading': 'cyan',
load: 'teal',
dispatch: 'green',
dispatch: 'edr-green',
};
export function WarehouseInventoryTable({

4
apps/edr-freight-web/backoffice/src/components/warehouses/badges.tsx
View File

@@ -25,7 +25,7 @@ export function WarehouseTypeBadge({ type }: { type: WarehouseType }) {
}
export function WarehouseStatusBadge({ status }: { status: WarehouseStatus }) {
const color = status === 'ACTIVE' ? 'green' : 'gray';
const color = status === 'ACTIVE' ? 'edr-green' : 'gray';
return (
<Badge color={color} variant="light" size="sm" radius="md" tt="uppercase" fw={600} style={badgeStyle}>
{status}
@@ -39,7 +39,7 @@ const inventoryStatusColor: Record<InventoryStatus, string> = {
RESERVED: 'grape',
READY_FOR_LOADING: 'cyan',
LOADED: 'teal',
DISPATCHED: 'green',
DISPATCHED: 'edr-green',
};
export function InventoryStatusBadge({ status }: { status: InventoryStatus }) {

43
apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
View File

@@ -1,32 +1,31 @@
import {
ActionIcon,
Card,
Group,
Stack,
Tabs,
Text,
TextInput,
} from "@mantine/core";
import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
import { useCallback, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ArrowRight, Calendar, Package, Search, User, X } from "lucide-react";
import {
Stack,
Group,
Text,
Card,
TextInput,
ActionIcon,
Tabs,
} from "@mantine/core";
import { PageContainer } from "@/components/page";
import Breadcrumbs from "@/components/ui/Breadcrumbs";
import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
import { BookingRequestsHeader } from "@/components/bookings/BookingRequestsHeader";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import {
BookingStatusTabs,
type BookingStatusTabKey,
} from "@/components/bookings/BookingStatusTabs";
import { BookingRequestsHeader } from "@/components/bookings/BookingRequestsHeader";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
import { OperationsBookingQueue } from "@/components/bookings/OperationsBookingQueue";
import { OperationsScheduledBookings } from "@/components/bookings/OperationsScheduledBookings";
import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
import { bookingTable } from "@/components/bookings/booking-ui.styles";
import { PageContainer } from "@/components/page";
import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
import { BOOKING_LIST_TABS } from "@/features/bookings/booking-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import {
@@ -34,15 +33,15 @@ import {
useBookingList,
useBookingListSummary,
} from "@/hooks/bookings/useBookings";
import { cn } from "@/lib/utils";
import type { BookingListFilter } from "@/services/bookings.service";
import type { BookingListRow } from "@/types/booking";
import { cn } from "@/lib/utils";
import {
Badge,
DataTable,
DataTableFooter,
type ColumnDef,
usePagination,
Badge,
type ColumnDef,
} from "@edr/ui-common";
function getStatusesForTab(tab: BookingStatusTabKey): string | undefined {
@@ -298,8 +297,6 @@ export default function BookingRequestsPage() {
return (
<PageContainer>
<Breadcrumbs items={[{ label: "Operations" }, { label: "Booking requests" }]} />
<Stack gap="lg">
<BookingRequestsHeader
metrics={metrics}

6
apps/edr-freight-web/backoffice/src/pages/bookings/NewBookingPage.tsx
View File

@@ -147,7 +147,7 @@ function FormSection({
icon: Icon,
title,
subtitle,
accent = "green",
accent = "edr-green",
right,
children,
}: {
@@ -394,7 +394,7 @@ export default function NewBookingPage() {
{/* LEFT — form */}
<Grid.Col span={{ base: 12, lg: 8 }}>
<Stack gap="lg">
<FormSection icon={Layers} title="Booking type" subtitle="Who is booking and what kind of freight" accent="green">
<FormSection icon={Layers} title="Booking type" subtitle="Who is booking and what kind of freight" accent="edr-green">
<Stack gap="md">
<Switch
label="Government booking"
@@ -745,7 +745,7 @@ export default function NewBookingPage() {
<Box style={{ position: "sticky", top: 16 }}>
<Paper radius="lg" withBorder p="lg" style={{ borderColor: "var(--mantine-color-gray-2)" }}>
<Group gap="sm" mb="md">
<ThemeIcon size={34} radius="md" variant="light" color="green">
<ThemeIcon size={34} radius="md" variant="light" color="edr-green">
<Weight size={17} />
</ThemeIcon>
<Text fw={700}>Summary</Text>

2
apps/edr-freight-web/backoffice/src/pages/fleet/FleetCrudPages.tsx
View File

@@ -751,7 +751,7 @@ export function WagonTypesCrudPage() {
<MantineTable.Td>{type.lengthMeters}</MantineTable.Td>
<MantineTable.Td>{type.supportedLoadTypes?.join(', ') || '-'}</MantineTable.Td>
<MantineTable.Td>
<MantineBadge color={type.isActive === false ? 'gray' : 'green'} variant="light">
<MantineBadge color={type.isActive === false ? 'gray' : 'edr-green'} variant="light">
{type.isActive === false ? 'Inactive' : 'Active'}
</MantineBadge>
</MantineTable.Td>

4
apps/edr-freight-web/backoffice/src/pages/payments/PaymentsPage.tsx
View File

@@ -58,7 +58,7 @@ const METHOD_OPTIONS: { value: PaymentMethod; label: string }[] = [
];
const STATUS_COLORS: Record<string, string> = {
success: "green",
success: "edr-green",
processing: "yellow",
"action-required": "yellow",
failed: "red",
@@ -205,7 +205,7 @@ export default function PaymentsPage() {
label: "Successful",
value: summary?.success ?? 0,
icon: CheckCircle2,
color: "green",
color: "edr-green",
},
{
label: "Processing",

8
apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
View File

@@ -516,12 +516,12 @@ export default function BatchBoardPage() {
style={{
padding: "2px 8px",
borderRadius: 8,
background: "var(--mantine-color-green-0)",
border: "1px solid var(--mantine-color-green-1)",
background: "var(--mantine-color-edr-green-0)",
border: "1px solid var(--mantine-color-edr-green-1)",
}}
>
<Package size={12} color="var(--mantine-color-green-7)" />
<Text size="xs" fw={700} c="green.8" lh={1.2}>
<Package size={12} color="var(--mantine-color-edr-green-7)" />
<Text size="xs" fw={700} c="edr-green.8" lh={1.2}>
{row.original.capacity.allocatedWagons}
</Text>
<Text size="10px" c="dimmed" lh={1.2}>

12
apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainScheduleV2ListPage.tsx
View File

@@ -180,8 +180,8 @@ export default function TrainScheduleV2ListPage() {
width: 34,
height: 34,
borderRadius: 9,
background: "var(--mantine-color-green-0)",
color: "var(--mantine-color-green-7)",
background: "var(--mantine-color-edr-green-0)",
color: "var(--mantine-color-edr-green-7)",
flexShrink: 0,
}}
>
@@ -576,13 +576,13 @@ function MetricChip({
borderRadius: 8,
background: subtle
? "var(--mantine-color-gray-1)"
: "var(--mantine-color-green-0)",
: "var(--mantine-color-edr-green-0)",
border: `1px solid ${
subtle ? "var(--mantine-color-gray-2)" : "var(--mantine-color-green-1)"
subtle ? "var(--mantine-color-gray-2)" : "var(--mantine-color-edr-green-1)"
}`,
}}
>
<Text size="sm" fw={700} c={subtle ? "gray.7" : "green.8"} lh={1.2}>
<Text size="sm" fw={700} c={subtle ? "gray.7" : "edr-green.8"} lh={1.2}>
{value}
</Text>
{label ? (
@@ -653,7 +653,7 @@ function ScheduleCard({
<Group gap="xs" wrap="nowrap">
<Button
variant="light"
color="green"
color="edr-green"
size="sm"
radius="md"
style={{ flex: 1 }}

6
apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
View File

@@ -22,7 +22,7 @@ import type { ArrivalQueueItem } from '@/types/warehouse';
function inspectionBadge(status: string | null) {
if (!status) return <Badge variant="light" color="gray" size="sm">Not inspected</Badge>;
const color = status === 'PASSED' ? 'green' : status === 'FAILED' ? 'red' : 'orange';
const color = status === 'PASSED' ? 'edr-green' : status === 'FAILED' ? 'red' : 'orange';
return <Badge variant="light" color={color} size="sm">{status.replace(/_/g, ' ')}</Badge>;
}
@@ -89,7 +89,7 @@ export default function ArrivalQueuePage() {
header: 'Status',
cell: ({ row }) =>
row.original.unloaded ? (
<Badge variant="light" color="green" size="sm">
<Badge variant="light" color="edr-green" size="sm">
{row.original.currentStatus ?? 'RECEIVED'}
</Badge>
) : (
@@ -125,7 +125,7 @@ export default function ArrivalQueuePage() {
<Button
size="compact-xs"
variant="light"
color="green"
color="edr-green"
leftSection={<ClipboardList size={14} />}
onClick={() => setInspectInventoryId(item.inventoryId)}
>

2
apps/edr-freight-web/backoffice/src/pages/warehouses/LoadedInventoryPage.tsx
View File

@@ -49,7 +49,7 @@ const columns: ColumnDef<Loading>[] = [
cell: ({ row }) => (
<Badge
variant="light"
color={row.original.inventory?.status === 'DISPATCHED' ? 'green' : 'teal'}
color={row.original.inventory?.status === 'DISPATCHED' ? 'edr-green' : 'teal'}
size="sm"
>
{row.original.inventory?.status ?? 'LOADED'}

2
apps/edr-freight-web/backoffice/src/pages/warehouses/LoadingQueuePage.tsx
View File

@@ -74,7 +74,7 @@ export default function LoadingQueuePage() {
<Tabs.Tab
value="ready"
leftSection={
<Badge size="xs" color="green">
<Badge size="xs" color="edr-green">
{paidItems.length}
</Badge>
}

2
apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx
View File

@@ -36,7 +36,7 @@ const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
DRAFT: 'gray',
ISSUED: 'orange',
PARTIALLY_PAID: 'yellow',
PAID: 'green',
PAID: 'edr-green',
CANCELLED: 'gray',
};

4
apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
View File

@@ -119,7 +119,7 @@ function AllocationRules() {
id: 'active',
header: 'Active',
cell: ({ row }) => (
<Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
<Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
{row.original.isActive ? 'Yes' : 'No'}
</Badge>
),
@@ -240,7 +240,7 @@ function FeeRules() {
id: 'active',
header: 'Active',
cell: ({ row }) => (
<Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
<Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
{row.original.isActive ? 'Yes' : 'No'}
</Badge>
),