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

fix ui

Browse Source
This commit is contained in:
marshal
2026-06-07 00:32:07 +03:00
parent 08b46c306f
commit 3fa1f54e3a
10 changed files with 84 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -150,7 +150,6 @@ function StepRow({
: isNext
? "green"
: "gray";
const highlighted = isNext || step.status === "APPROVED";
return (
<Group
@@ -161,8 +160,11 @@ function StepRow({
py="xs"
style={{
borderRadius: 8,
border: `1px solid ${highlighted ? "var(--mantine-color-green-2)" : "var(--mantine-color-gray-2)"}`,
background: isNext ? "var(--mantine-color-green-0)" : "white",
border: "1px solid var(--mantine-color-gray-2)",
borderLeft: isNext
? "3px solid var(--mantine-color-green-6)"
: "1px solid var(--mantine-color-gray-2)",
background: isNext ? "var(--mantine-color-gray-0)" : "white",
}}
>
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
@@ -177,8 +179,8 @@ function StepRow({
flexShrink: 0,
fontSize: 12,
fontWeight: 700,
background: isNext ? "var(--mantine-color-green-1)" : "var(--mantine-color-gray-1)",
color: isNext ? "var(--mantine-color-green-8)" : "var(--mantine-color-gray-6)",
background: "var(--mantine-color-gray-1)",
color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
}}
>
{step.stepOrder}

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

@@ -37,7 +37,14 @@ export function BookingStatusBadge({ status }: { status: string }) {
radius="md"
tt="uppercase"
fw={600}
style={{ fontSize: "0.7rem", letterSpacing: "0.05em" }}
title={style.label}
style={{
fontSize: "0.7rem",
letterSpacing: "0.05em",
display: "inline-flex",
maxWidth: "100%",
whiteSpace: "nowrap",
}}
>
{style.label}
</Badge>

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

@@ -40,12 +40,17 @@ export function BookingStatusTabs({
return (
<Group
gap="sm"
wrap="wrap"
wrap="nowrap"
p="md"
style={{
background: "var(--mantine-color-gray-0)",
borderRadius: "12px",
border: "1px solid var(--mantine-color-gray-2)",
overflowX: "auto",
overflowY: "hidden",
WebkitOverflowScrolling: "touch",
scrollBehavior: "smooth",
scrollbarWidth: "thin",
}}
>
{BOOKING_LIST_TABS.map((tab) => {
@@ -56,6 +61,7 @@ export function BookingStatusTabs({
key={tab.key}
onClick={() => onChange(tab.key)}
style={{
flexShrink: 0,
background: isActive ? "white" : "transparent",
border: isActive ? "1px solid var(--mantine-color-green-3)" : "1px solid var(--mantine-color-gray-2)",
borderRadius: "10px",

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

@@ -13,7 +13,7 @@ import {
WORKFLOW_STAGES,
} from "@/features/bookings/booking-status.config";
import { SectionCard } from "./detail/SectionCard";
import { BRAND_GREEN } from "./detail/booking-detail.styles";
import { BRAND_GREEN, detailStyles } from "./detail/booking-detail.styles";
const STAGE_ICONS: LucideIcon[] = [
FileText,
@@ -112,16 +112,11 @@ export function BookingWorkflowStepper({
radius="md"
withBorder
p="md"
style={{
background: isTerminal
? "var(--mantine-color-red-0)"
: "var(--mantine-color-green-0)",
borderColor: isTerminal
? "var(--mantine-color-red-2)"
: "var(--mantine-color-green-2)",
}}
style={
isTerminal ? detailStyles.statusBannerTerminal : detailStyles.statusBanner
}
>
<Text size="sm" fw={600} c={isTerminal ? "red.7" : "green.8"}>
<Text size="sm" fw={600} c={isTerminal ? "red.7" : "dark"}>
{title}
</Text>
<Text size="sm" c="dimmed" mt={4}>

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

@@ -11,7 +11,7 @@ export function NextStepBanner({ nextStep }: NextStepBannerProps) {
return (
<Alert
variant="light"
color="green"
color="gray"
radius="md"
icon={<ArrowRight size={16} />}
title={

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

@@ -75,11 +75,11 @@ export function BookingRouteServiceCard({
width: 36,
height: 36,
borderRadius: "50%",
background: "var(--mantine-color-green-0)",
border: "1px solid var(--mantine-color-green-2)",
background: "var(--mantine-color-gray-1)",
border: "1px solid var(--mantine-color-gray-3)",
}}
>
<Train size={18} color="var(--mantine-color-green-7)" />
<Train size={18} color="var(--mantine-color-gray-7)" />
</Box>
<Badge variant="light" color="gray" size="sm" radius="sm" tt="uppercase">
{serviceLabel}

18
apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts
View File

@@ -20,10 +20,22 @@ export const detailStyles = {
borderBottom: "1px solid var(--mantine-color-gray-2)",
} satisfies CSSProperties,
/** Subtle key-figure card (e.g. payment) — tinted, still flat. */
/** Subtle key-figure card (e.g. payment) — neutral tint, still flat. */
highlightCard: {
background: "var(--mantine-color-green-0)",
borderColor: "var(--mantine-color-green-2)",
background: "var(--mantine-color-gray-0)",
borderColor: "var(--mantine-color-gray-2)",
} satisfies CSSProperties,
/** Workflow status description banner — neutral default. */
statusBanner: {
background: "var(--mantine-color-gray-0)",
borderColor: "var(--mantine-color-gray-2)",
} satisfies CSSProperties,
/** Workflow status banner for terminal (rejected/cancelled) states. */
statusBannerTerminal: {
background: "var(--mantine-color-red-0)",
borderColor: "var(--mantine-color-red-2)",
} satisfies CSSProperties,
routeLine: {