mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-27 00:52:50 +00:00
style: enhance UI components for New Booking page and Step Indicator
This commit is contained in:
Nathnael
@@ -22,7 +22,7 @@ import {
|
||||
Sun,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import { Fragment, type ReactNode, useState } from "react";
|
||||
import { type CSSProperties, Fragment, type ReactNode, useState } from "react";
|
||||
|
||||
export interface SidebarItem {
|
||||
label: string;
|
||||
@@ -47,6 +47,18 @@ export interface AppLayoutProps {
|
||||
type Theme = "light" | "dark";
|
||||
const THEME_KEY = "edr-theme";
|
||||
|
||||
const EDR = {
|
||||
primary: "#0EA371",
|
||||
primaryDark: "#0A6F4D",
|
||||
soft: "#ECF6F1",
|
||||
border: "#E6ECF2",
|
||||
bg: "#F4F7FA",
|
||||
text: "#10202F",
|
||||
muted: "#6B7C8E",
|
||||
ink: "#0C1A2B",
|
||||
accent: "#F2A516",
|
||||
};
|
||||
|
||||
function getStoredTheme(): Theme {
|
||||
if (typeof window === "undefined") return "light";
|
||||
const stored = localStorage.getItem(THEME_KEY);
|
||||
@@ -82,24 +94,18 @@ function getActivePage(items: SidebarItem[], activePath: string): { label: strin
|
||||
const navClassNames = (active: boolean) => {
|
||||
if (active) {
|
||||
return {
|
||||
root: "rounded-[10px] font-medium transition-all duration-150 bg-[var(--mantine-color-edr-soft-0)]! ring-1 ring-inset ring-[var(--mantine-color-edr-green-5)]/15",
|
||||
label: "text-[var(--mantine-color-edr-green-7)]! font-bold!",
|
||||
section: "text-[var(--mantine-color-edr-green-7)]!",
|
||||
root: `rounded-[10px] font-medium transition-all duration-150 bg-[#ECF6F1]! ring-1 ring-inset ring-[#0EA371]/15`,
|
||||
label: `text-[#0A6F4D]! font-bold!`,
|
||||
section: `text-[#0A6F4D]!`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
root: "rounded-[10px] font-medium transition-all duration-150 hover:bg-[var(--mantine-color-edr-slate-soft-0)]!",
|
||||
label: "text-[var(--mantine-color-edr-slate-0)]! font-semibold! hover:text-[var(--mantine-color-edr-ink-0)]!",
|
||||
section: "text-[var(--mantine-color-edr-muted-0)]! hover:text-[var(--mantine-color-edr-ink-0)]!",
|
||||
root: `rounded-[10px] font-medium transition-all duration-150 hover:bg-[#F1F4F7]!`,
|
||||
label: `text-[#3D4D5C]! font-semibold! hover:text-[#0C1A2B]!`,
|
||||
section: `text-[#54657A]! hover:text-[#0C1A2B]!`,
|
||||
};
|
||||
};
|
||||
|
||||
// 36×36 header control chips
|
||||
const islandCls =
|
||||
"size-9 rounded-full border border-[var(--mantine-color-edr-border-0)] bg-white flex items-center justify-center shrink-0 cursor-pointer";
|
||||
const squareIslandCls =
|
||||
"size-9 rounded-[10px] border border-[var(--mantine-color-edr-border-0)] bg-white flex items-center justify-center shrink-0 cursor-pointer";
|
||||
|
||||
export function AppLayout({
|
||||
title = "EDR Freight",
|
||||
sidebarItems,
|
||||
@@ -133,6 +139,21 @@ export function AppLayout({
|
||||
activePath === item.href.toLowerCase() ||
|
||||
activePath.startsWith(item.href.toLowerCase() + "/");
|
||||
|
||||
// Shared header "island" styles — every control is a consistent 36px chip.
|
||||
const islandStyle: CSSProperties = {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 999,
|
||||
border: `1px solid ${EDR.border}`,
|
||||
backgroundColor: "#fff",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
cursor: "pointer",
|
||||
};
|
||||
const toggleStyle: CSSProperties = { ...islandStyle, borderRadius: 10 };
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
layout="alt"
|
||||
@@ -140,27 +161,37 @@ export function AppLayout({
|
||||
header={{ height: 56 }}
|
||||
padding={0}
|
||||
>
|
||||
{/* ── Header ── */}
|
||||
{/* ── Header (frosted glass; compact floating islands, mirrors the pen) ── */}
|
||||
<AppShell.Header
|
||||
withBorder={false}
|
||||
style={{
|
||||
backdropFilter: "blur(14px)",
|
||||
WebkitBackdropFilter: "blur(14px)",
|
||||
background: "transparent",
|
||||
boxShadow: "none",
|
||||
border: "none",
|
||||
boxShadow: "none",
|
||||
background:'transparent',
|
||||
}}
|
||||
>
|
||||
<Group h="100%" px={24} justify="space-between" wrap="nowrap">
|
||||
{/* Left: sidebar toggle + page title */}
|
||||
<Group gap={12} wrap="nowrap" align="center">
|
||||
<UnstyledButton onClick={toggleMobile} className={squareIslandCls} aria-label="Toggle sidebar">
|
||||
<MenuIcon size={18} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
|
||||
<UnstyledButton onClick={toggleMobile} style={toggleStyle} aria-label="Toggle sidebar">
|
||||
<MenuIcon size={18} color={EDR.text} strokeWidth={1.8} />
|
||||
</UnstyledButton>
|
||||
<Text fw={700} fz="lg" c="edr-text">
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: '"Inter", sans-serif',
|
||||
fontSize: 16,
|
||||
fontWeight: 700,
|
||||
color: EDR.text,
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{activePage ? activePage.label : title}
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
{/* Right: search + bell + avatar */}
|
||||
<Group gap={10} wrap="nowrap" align="center">
|
||||
{/* Search pill */}
|
||||
<Group
|
||||
@@ -171,22 +202,22 @@ export function AppLayout({
|
||||
width: 260,
|
||||
height: 36,
|
||||
borderRadius: 999,
|
||||
border: "1px solid var(--mantine-color-edr-border-0)",
|
||||
backgroundColor: "var(--mantine-color-white)",
|
||||
border: `1px solid ${EDR.border}`,
|
||||
backgroundColor: "#fff",
|
||||
padding: "0 14px",
|
||||
cursor: "text",
|
||||
}}
|
||||
>
|
||||
<Search size={15} color="var(--mantine-color-edr-muted-0)" strokeWidth={1.8} />
|
||||
<Text size="sm" c="edr-muted" style={{ userSelect: "none" }}>
|
||||
<Search size={15} color={EDR.muted} strokeWidth={1.8} />
|
||||
<Text size="sm" style={{ color: EDR.muted, userSelect: "none" }}>
|
||||
Search shipments, bookings…
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
{/* Bell */}
|
||||
<Box style={{ position: "relative" }}>
|
||||
<UnstyledButton className={islandCls} aria-label="Notifications">
|
||||
<Bell size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
|
||||
<UnstyledButton style={islandStyle} aria-label="Notifications">
|
||||
<Bell size={17} color={EDR.text} strokeWidth={1.8} />
|
||||
</UnstyledButton>
|
||||
<Box
|
||||
style={{
|
||||
@@ -196,30 +227,30 @@ export function AppLayout({
|
||||
width: 7,
|
||||
height: 7,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "var(--mantine-color-edr-accent-0)",
|
||||
border: "1.5px solid var(--mantine-color-white)",
|
||||
backgroundColor: EDR.accent,
|
||||
border: "1.5px solid #fff",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{enableThemeToggle && (
|
||||
<UnstyledButton onClick={toggleTheme} className={islandCls} aria-label="Toggle theme">
|
||||
<UnstyledButton onClick={toggleTheme} style={islandStyle} aria-label="Toggle theme">
|
||||
{theme === "dark"
|
||||
? <Sun size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />
|
||||
: <Moon size={17} color="var(--mantine-color-edr-text-0)" strokeWidth={1.8} />}
|
||||
? <Sun size={17} color={EDR.text} strokeWidth={1.8} />
|
||||
: <Moon size={17} color={EDR.text} strokeWidth={1.8} />}
|
||||
</UnstyledButton>
|
||||
)}
|
||||
|
||||
{/* Avatar dropdown */}
|
||||
{/* Avatar pill */}
|
||||
<Menu width={220} position="bottom-end" withinPortal shadow="md" offset={8} radius="md">
|
||||
<Menu.Target>
|
||||
<UnstyledButton
|
||||
style={{
|
||||
height: 36,
|
||||
borderRadius: 999,
|
||||
border: "1px solid var(--mantine-color-edr-border-0)",
|
||||
backgroundColor: "var(--mantine-color-white)",
|
||||
border: `1px solid ${EDR.border}`,
|
||||
backgroundColor: "#fff",
|
||||
padding: "0 10px 0 4px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -230,12 +261,13 @@ export function AppLayout({
|
||||
<Avatar radius="xl" size={28} color="edr-green.5">
|
||||
<Text fw={700} fz={12} c="white">{initials}</Text>
|
||||
</Avatar>
|
||||
<ChevronDown size={15} color="var(--mantine-color-edr-muted-0)" strokeWidth={1.8} />
|
||||
<ChevronDown size={15} color={EDR.muted} strokeWidth={1.8} />
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
<Box px="sm" py="xs">
|
||||
<Text size="sm" fw={600} truncate c="edr-text">{userName}</Text>
|
||||
<Text size="sm" fw={600} truncate style={{ color: EDR.text }}>{userName}</Text>
|
||||
{userEmail && <Text size="xs" c="dimmed" truncate>{userEmail}</Text>}
|
||||
</Box>
|
||||
<Divider />
|
||||
@@ -255,33 +287,49 @@ export function AppLayout({
|
||||
<AppShell.Navbar
|
||||
withBorder={false}
|
||||
style={{
|
||||
backgroundColor: "var(--mantine-color-white)",
|
||||
borderRight: "1px solid var(--mantine-color-edr-border-0)",
|
||||
backgroundColor: "#ffffff",
|
||||
borderRight: `1px solid ${EDR.border}`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* Brand */}
|
||||
<Box className="h-[60px] shrink-0 flex items-center px-[18px]">
|
||||
<Box
|
||||
style={{
|
||||
height: 60,
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0 18px",
|
||||
}}
|
||||
>
|
||||
<Group gap={11} wrap="nowrap">
|
||||
<img
|
||||
src="/assets/edr-logo.png"
|
||||
alt="EDR"
|
||||
className="size-10 object-contain shrink-0"
|
||||
style={{ width: 40, height: 40, objectFit: "contain", flexShrink: 0 }}
|
||||
/>
|
||||
<Box>
|
||||
<Text
|
||||
fw={800}
|
||||
style={{
|
||||
fontFamily: '"Inter", sans-serif',
|
||||
fontWeight: 800,
|
||||
fontSize: 19,
|
||||
letterSpacing: "0.03em",
|
||||
color: "var(--mantine-color-edr-green-5)",
|
||||
color: EDR.primary,
|
||||
lineHeight: 1.15,
|
||||
}}
|
||||
>
|
||||
EDR FREIGHT
|
||||
</Text>
|
||||
<Text fz={10.5} fw={500} c="edr-muted" style={{ lineHeight: 1.2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10.5,
|
||||
fontWeight: 500,
|
||||
color: EDR.muted,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
Ethio–Djibouti Railway
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -302,13 +350,17 @@ export function AppLayout({
|
||||
item.section && item.section !== prevSection ? (
|
||||
<Text
|
||||
key={`section-${item.section}`}
|
||||
fz={11}
|
||||
size="xs"
|
||||
tt="uppercase"
|
||||
px="sm"
|
||||
mt={i === 0 ? 4 : "md"}
|
||||
mb={4}
|
||||
c="edr-muted"
|
||||
style={{ fontWeight: 600, letterSpacing: "0.08em" }}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
letterSpacing: "0.08em",
|
||||
color: EDR.muted,
|
||||
fontSize: 11,
|
||||
}}
|
||||
>
|
||||
{item.section}
|
||||
</Text>
|
||||
@@ -369,38 +421,42 @@ export function AppLayout({
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{/* Train image fills the full card */}
|
||||
<img
|
||||
src="/assets/train-edr.jpg"
|
||||
alt=""
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "-16px",
|
||||
left: 0,
|
||||
right: "-70px",
|
||||
bottom:"-16px",
|
||||
left:0,
|
||||
right:"-70px",
|
||||
width: "120%",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Diagonal green overlay: lower-left → upper-right cut */}
|
||||
<Box
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
top: "-75%",
|
||||
background: "linear-gradient(165deg, #006149 40%, #0DC9A4 70%, #0DC9A402 80%)",
|
||||
top:"-75%",
|
||||
background: "linear-gradient(165deg, #006149 40%, #0DC9A4 70%, #0DC9A402 80%)",
|
||||
clipPath: "polygon(0 0, 100% 0, 100% 58%, 0 72%)",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
style={{ position: "relative", zIndex: 1, padding: "16px 16px 0" }}
|
||||
className="max-w-[180px]"
|
||||
>
|
||||
<Text fw={800} style={{ fontSize: 15, color: "#fff", lineHeight: 1.3, marginBottom: 4 }}>
|
||||
|
||||
{/* Text sits on top of the green overlay */}
|
||||
<Box style={{ position: "relative", zIndex: 1, padding: "16px 16px 0" }} className="max-w-[180px]">
|
||||
<Text style={{ fontSize: 15, fontWeight: 800, color: "#fff", lineHeight: 1.3, marginBottom: 4 }}>
|
||||
Moving Africa Forward
|
||||
</Text>
|
||||
<Text style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>
|
||||
Reliable. Efficient. Connected.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Learn More — visible on the image area */}
|
||||
<Box
|
||||
style={{
|
||||
position: "absolute",
|
||||
@@ -410,24 +466,22 @@ export function AppLayout({
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 5,
|
||||
backgroundColor: "var(--mantine-color-white)",
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 8,
|
||||
padding: "6px 12px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Text fw={600} style={{ fontSize: 12, color: "var(--mantine-color-edr-green-7)" }}>
|
||||
Learn More
|
||||
</Text>
|
||||
<span style={{ fontSize: 12, color: "var(--mantine-color-edr-green-7)" }}>→</span>
|
||||
<Text style={{ fontSize: 12, fontWeight: 600, color: EDR.primaryDark }}>Learn More</Text>
|
||||
<span style={{ fontSize: 12, color: EDR.primaryDark }}>→</span>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Profile footer */}
|
||||
{/* Profile */}
|
||||
<Box
|
||||
style={{
|
||||
borderRadius: 12,
|
||||
border: "1px solid var(--mantine-color-edr-border-0)",
|
||||
border: `1px solid ${EDR.border}`,
|
||||
padding: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -435,20 +489,25 @@ export function AppLayout({
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Avatar radius="xl" size={38} color="edr-green.5" style={{ flexShrink: 0 }}>
|
||||
<Avatar
|
||||
radius="xl"
|
||||
size={38}
|
||||
color="edr-green.5"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<Text fw={600} fz={13} c="white">{initials}</Text>
|
||||
</Avatar>
|
||||
<Box style={{ minWidth: 0, flex: 1 }}>
|
||||
<Text size="sm" fw={600} truncate c="edr-text" style={{ lineHeight: 1.3 }}>
|
||||
<Text size="sm" fw={600} truncate style={{ color: EDR.text, lineHeight: 1.3 }}>
|
||||
{userName}
|
||||
</Text>
|
||||
{userEmail && (
|
||||
<Text size="xs" truncate c="edr-muted" style={{ lineHeight: 1.3 }}>
|
||||
<Text size="xs" truncate style={{ color: EDR.muted, lineHeight: 1.3 }}>
|
||||
{userEmail}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<ChevronDown size={16} color="var(--mantine-color-edr-muted-0)" style={{ flexShrink: 0 }} />
|
||||
<ChevronDown size={16} color={EDR.muted} style={{ flexShrink: 0 }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</AppShell.Navbar>
|
||||
@@ -456,9 +515,9 @@ export function AppLayout({
|
||||
{/* ── Main ── */}
|
||||
<AppShell.Main
|
||||
style={{
|
||||
backgroundColor: "var(--mantine-color-edr-bg-0)",
|
||||
backgroundColor: EDR.bg,
|
||||
backgroundImage:
|
||||
"radial-gradient(58% 42% at 100% 0%, rgba(14,163,113,0.16) 0%, rgba(14,163,113,0.06) 38%, rgba(14,163,113,0) 72%)",
|
||||
"radial-gradient(58% 42% at 100% 0%, rgba(14,163,113,0.18) 0%, rgba(14,163,113,0.0.8) 38%, rgba(14,163,113,0.04) 72%)",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundAttachment: "fixed",
|
||||
}}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { AlertCircle, Check, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Alert, Box, Button, Text } from "@mantine/core";
|
||||
import { api } from "@/services/api";
|
||||
import type { CreateBookingPayload } from "@/services/bookings.service";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Alert, Box, Button, Group, Text, Title } from "@mantine/core";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AlertCircle, Check, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
BookingFormInputValues,
|
||||
STEPS,
|
||||
@@ -99,14 +99,6 @@ export default function NewBookingPage() {
|
||||
const findShippingLineId = (name: string): string | undefined =>
|
||||
shippingLines.find((l) => l.name === name)?.id;
|
||||
|
||||
const findCargoTypeId = (name: string): string | undefined => {
|
||||
for (const group of cargoTree) {
|
||||
const child = group.children?.find((c) => c.name === name);
|
||||
if (child) return child.id;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const findContainerCargoTypeId = (): string => {
|
||||
const group = cargoTree.find(
|
||||
(g) => g.code === "CONTAINER" || /container/i.test(g.name),
|
||||
@@ -199,102 +191,145 @@ export default function NewBookingPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
id="new-booking-form"
|
||||
className="flex flex-col"
|
||||
onSubmit={handleSubmit}
|
||||
<Box
|
||||
style={{
|
||||
padding: "28px 0 0",
|
||||
minHeight: "calc(100dvh - var(--app-shell-header-height, 56px))",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* Step indicator — sticky */}
|
||||
<Box className="sticky top-0 z-20 border-b border-gray-100 bg-white/90 backdrop-blur-sm">
|
||||
<Box className="mx-auto max-w-4xl px-6 py-4">
|
||||
<StepIndicator step={step} />
|
||||
{/* ── Page header ─────────────────────────────────────────────────── */}
|
||||
<Group justify="space-between" px={"lg"} align="flex-end" wrap="wrap" gap="md" mb="lg">
|
||||
<Box>
|
||||
<Title order={1} fw={800} fz={26} style={{ letterSpacing: "-0.01em" }}>
|
||||
New Booking
|
||||
</Title>
|
||||
<Text size="sm" c="edr-muted" mt={4}>
|
||||
Fill in the details below to book your freight shipment.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="default"
|
||||
radius="md"
|
||||
leftSection={<ChevronLeft size={16} />}
|
||||
onClick={() => navigate("/bookings")}
|
||||
>
|
||||
Back to Bookings
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* Step content */}
|
||||
<Box flex={1}>
|
||||
<Box className="mx-auto max-w-4xl px-6 py-8">
|
||||
{createMutation.isError && (
|
||||
<Alert
|
||||
color="red"
|
||||
icon={<AlertCircle size={16} />}
|
||||
radius="md"
|
||||
mb="lg"
|
||||
>
|
||||
<Text size="sm" fw={600}>
|
||||
Failed to save draft
|
||||
</Text>
|
||||
<Text size="sm" mt={4} c="red.7">
|
||||
{createMutation.error instanceof Error
|
||||
? createMutation.error.message
|
||||
: "An unexpected error occurred. Please try again."}
|
||||
</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{step === 1 && <Step1ContractType form={form} />}
|
||||
{step === 2 && <Step2ServiceType form={form} />}
|
||||
{step === 3 && (
|
||||
<Step4Route
|
||||
form={form}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<Step5CargoDetails
|
||||
form={form}
|
||||
direction={direction}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 5 && (
|
||||
<Step8Review form={form} setStep={setStep} direction={direction} />
|
||||
)}
|
||||
<form
|
||||
id="new-booking-form"
|
||||
className="flex flex-col"
|
||||
style={{ flex: 1 }}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* Step indicator */}
|
||||
<Box
|
||||
>
|
||||
<Box className="mx-auto max-w-5xl" style={{ paddingInline: "16px" , }}>
|
||||
<StepIndicator step={step} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Navigation footer — sticky */}
|
||||
<Box className="sticky bottom-0 z-20 border-t border-gray-200 bg-white/90 px-6 py-4 backdrop-blur-sm">
|
||||
<Box className="mx-auto flex max-w-4xl items-center justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="default"
|
||||
radius="md"
|
||||
leftSection={<ChevronLeft size={16} />}
|
||||
onClick={() => setStep((s) => Math.max(1, s - 1))}
|
||||
disabled={step === 1}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
{/* Step content */}
|
||||
<Box flex={1}>
|
||||
<Box className="mx-auto max-w-5xl" style={{ padding: "32px 24px" }}>
|
||||
{createMutation.isError && (
|
||||
<Alert
|
||||
color="red"
|
||||
icon={<AlertCircle size={16} />}
|
||||
radius="md"
|
||||
mb="lg"
|
||||
>
|
||||
<Text size="sm" fw={600}>
|
||||
Failed to save draft
|
||||
</Text>
|
||||
<Text size="sm" mt={4} c="red.7">
|
||||
{createMutation.error instanceof Error
|
||||
? createMutation.error.message
|
||||
: "An unexpected error occurred. Please try again."}
|
||||
</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{step < STEPS.length ? (
|
||||
{step === 1 && <Step1ContractType form={form} />}
|
||||
{step === 2 && <Step2ServiceType form={form} />}
|
||||
{step === 3 && (
|
||||
<Step4Route
|
||||
form={form}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<Step5CargoDetails
|
||||
form={form}
|
||||
direction={direction}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 5 && (
|
||||
<Step8Review form={form} setStep={setStep} direction={direction} />
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Navigation footer */}
|
||||
<Box
|
||||
style={{
|
||||
position: "sticky",
|
||||
bottom: 0,
|
||||
zIndex: 20,
|
||||
borderTop: "1px solid var(--mantine-color-edr-border-0)",
|
||||
backgroundColor: "rgba(255,255,255,0.94)",
|
||||
backdropFilter: "blur(14px)",
|
||||
WebkitBackdropFilter: "blur(14px)",
|
||||
padding: "16px 24px",
|
||||
marginTop: "auto",
|
||||
}}
|
||||
>
|
||||
<Group justify="space-between" className="mx-auto max-w-4xl">
|
||||
<Button
|
||||
type="button"
|
||||
color="edr-green"
|
||||
variant="default"
|
||||
radius="md"
|
||||
rightSection={<ChevronRight size={16} />}
|
||||
onClick={handleContinue}
|
||||
leftSection={<ChevronLeft size={16} />}
|
||||
onClick={() => setStep((s) => Math.max(1, s - 1))}
|
||||
disabled={step === 1}
|
||||
>
|
||||
Continue
|
||||
Back
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
form="new-booking-form"
|
||||
color="edr-green"
|
||||
radius="md"
|
||||
loading={createMutation.isPending}
|
||||
leftSection={
|
||||
createMutation.isPending ? undefined : <Check size={16} />
|
||||
}
|
||||
>
|
||||
{createMutation.isPending ? "Saving Draft..." : "Save as Draft"}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{step < STEPS.length ? (
|
||||
<Button
|
||||
type="button"
|
||||
color="edr-green"
|
||||
radius="md"
|
||||
rightSection={<ChevronRight size={16} />}
|
||||
onClick={handleContinue}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
form="new-booking-form"
|
||||
color="edr-green"
|
||||
radius="md"
|
||||
loading={createMutation.isPending}
|
||||
leftSection={
|
||||
createMutation.isPending ? undefined : <Check size={16} />
|
||||
}
|
||||
>
|
||||
{createMutation.isPending ? "Saving Draft..." : "Save as Draft"}
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Box>
|
||||
</Box>
|
||||
</form>
|
||||
</form>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Fragment } from "react";
|
||||
import { Check } from "lucide-react";
|
||||
import { Fragment } from "react";
|
||||
import { STEPS } from "./schema";
|
||||
|
||||
export function StepIndicator({ step }: { step: number }) {
|
||||
@@ -9,29 +9,73 @@ export function StepIndicator({ step }: { step: number }) {
|
||||
<Fragment key={item.id}>
|
||||
<div className="flex shrink-0 flex-col items-center gap-1">
|
||||
<div
|
||||
className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-all duration-200 ${
|
||||
step > item.id
|
||||
? "bg-emerald-600 text-white shadow-sm shadow-emerald-600/40"
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
flexShrink: 0,
|
||||
transition: "all 0.2s",
|
||||
...(step > item.id
|
||||
? {
|
||||
backgroundColor: "var(--mantine-color-edr-green-5)",
|
||||
color: "#fff",
|
||||
boxShadow: "0 2px 8px rgba(14,163,113,0.4)",
|
||||
}
|
||||
: step === item.id
|
||||
? "border-2 border-emerald-500 text-emerald-600 shadow-sm shadow-emerald-500/30"
|
||||
: "bg-gray-100 text-gray-400"
|
||||
}`}
|
||||
? {
|
||||
border: "2.5px solid var(--mantine-color-edr-green-5)",
|
||||
color: "var(--mantine-color-edr-green-7)",
|
||||
backgroundColor: "#fff",
|
||||
boxShadow: "0 0 0 3px rgba(14,163,113,0.12)",
|
||||
}
|
||||
: {
|
||||
backgroundColor: "#fff",
|
||||
color: "var(--mantine-color-edr-muted-0)",
|
||||
border: "2px solid var(--mantine-color-edr-border-0)",
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{step > item.id ? <Check className="h-3.5 w-3.5" /> : item.id}
|
||||
{step > item.id ? (
|
||||
<Check style={{ width: 13, height: 13 }} />
|
||||
) : (
|
||||
item.id
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`hidden text-[10px] font-medium lg:block transition-colors ${
|
||||
step >= item.id ? "text-gray-800" : "text-gray-400"
|
||||
}`}
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: 500,
|
||||
display: "none",
|
||||
transition: "color 0.2s",
|
||||
color:
|
||||
step >= item.id
|
||||
? "var(--mantine-color-edr-text-0)"
|
||||
: "var(--mantine-color-edr-muted-0)",
|
||||
}}
|
||||
className="lg:!block"
|
||||
>
|
||||
{item.short}
|
||||
</span>
|
||||
</div>
|
||||
{index < STEPS.length - 1 && (
|
||||
<div
|
||||
className={`mx-1 h-0.5 flex-1 rounded-full transition-all duration-300 ${
|
||||
step > item.id ? "bg-emerald-500" : "bg-gray-200"
|
||||
}`}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 2,
|
||||
borderRadius: 999,
|
||||
margin: "0 6px",
|
||||
marginBottom: 14,
|
||||
transition: "background-color 0.3s",
|
||||
backgroundColor:
|
||||
step > item.id
|
||||
? "var(--mantine-color-edr-green-5)"
|
||||
: "var(--mantine-color-edr-border-0)",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
|
||||
Reference in New Issue
Block a user