booking operations and trains scheduling also allocations

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

@@ -0,0 +1,90 @@
+import { Badge, Group, Paper, Progress, Stack, Text, ThemeIcon } from "@mantine/core";
+import type { LucideIcon } from "lucide-react";
+import {
+  CheckCircle2,
+  Container,
+  LayoutGrid,
+  Link2,
+  Package,
+} from "lucide-react";
+
+
+const stepIcons: Record<string, LucideIcon> = {
+  package: Package,
+  layout: LayoutGrid,
+  container: Container,
+  link: Link2,
+  check: CheckCircle2,
+};
+
+export function SchedulingWorkflowHeader({
+  title,
+  subtitle,
+  activeStep,
+  totalSteps,
+  stepLabel,
+  stepDescription,
+  stepIcon = "package",
+}: {
+  title: string;
+  subtitle?: string;
+  activeStep: number;
+  totalSteps: number;
+  stepLabel: string;
+  stepDescription?: string;
+  stepIcon?: keyof typeof stepIcons;
+}) {
+  const Icon = stepIcons[stepIcon] ?? Package;
+  const progress = totalSteps > 0 ? Math.round(((activeStep + 1) / totalSteps) * 100) : 0;
+
+  return (
+    <Paper
+      p="md"
+      radius="xl"
+      withBorder
+      style={{
+        background:
+          "linear-gradient(180deg, var(--mantine-color-white) 0%, var(--mantine-color-gray-0) 100%)",
+      }}
+    >
+      <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: "teal", to: "green", deg: 135 }}>
+            <Icon size={20} />
+          </ThemeIcon>
+          <Stack gap={4}>
+            <Text fw={700} size="lg">
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text size="sm" c="dimmed">
+                {subtitle}
+              </Text>
+            ) : null}
+          </Stack>
+        </Group>
+        <Badge size="lg" variant="light" color="teal">
+          Step {activeStep + 1} of {totalSteps}
+        </Badge>
+      </Group>
+
+      <Stack gap={6} mt="md">
+        <Group justify="space-between">
+          <Text size="sm" fw={600}>
+            {stepLabel}
+            {stepDescription ? (
+              <Text span c="dimmed" fw={400}>
+                {" "}
+                · {stepDescription}
+              </Text>
+            ) : null}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {progress}%
+          </Text>
+        </Group>
+        <Progress value={progress} size="sm" radius="xl" color="teal" />
+      </Stack>
+    </Paper>
+  );
+}