feat: full wagon cancel, leg board, wagon dates

feat(freight): editable train leg times, SL invoice payer

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

@@ -0,0 +1,103 @@
+import { Button, Group, Modal, Stack, Text, Textarea } from "@mantine/core";
+import { DateTimePicker } from "@mantine/dates";
+import { useEffect, useState } from "react";
+
+/**
+ * Time + note for one leg of a train's journey — used both to log a pass
+ * (defaults to now) and to correct an already-logged leg (prefilled). Past
+ * times are allowed (staff record after the fact); the future is not, and the
+ * server additionally keeps legs in corridor order.
+ */
+export function CheckpointTimeModal({
+  opened,
+  onClose,
+  title,
+  icon,
+  description,
+  initialOccurredAt,
+  initialNote,
+  submitLabel,
+  submitColor = "edr-green",
+  loading,
+  onSubmit,
+}: {
+  opened: boolean;
+  onClose: () => void;
+  title: string;
+  icon?: React.ReactNode;
+  description?: string;
+  /** ISO; omit to default to now. */
+  initialOccurredAt?: string | null;
+  initialNote?: string | null;
+  submitLabel: string;
+  submitColor?: string;
+  loading: boolean;
+  onSubmit: (values: { occurredAt: string; note: string }) => void;
+}) {
+  const [at, setAt] = useState<Date | null>(null);
+  const [note, setNote] = useState("");
+  useEffect(() => {
+    if (!opened) return;
+    setAt(initialOccurredAt ? new Date(initialOccurredAt) : new Date());
+    setNote(initialNote ?? "");
+  }, [opened, initialOccurredAt, initialNote]);
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      centered
+      radius="lg"
+      title={
+        <Group gap={8}>
+          {icon}
+          <Text fw={700}>{title}</Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        {description ? (
+          <Text size="sm" c="dimmed">
+            {description}
+          </Text>
+        ) : null}
+        <DateTimePicker
+          label="Time"
+          description="Defaults to now — pick an earlier time if you are recording after the fact."
+          value={at}
+          onChange={(v) => setAt(v ? new Date(v) : null)}
+          maxDate={new Date()}
+          valueFormat="DD MMM YYYY HH:mm"
+          clearable={false}
+          radius="md"
+        />
+        <Textarea
+          label="Note"
+          placeholder="Optional"
+          value={note}
+          onChange={(e) => setNote(e.currentTarget.value)}
+          autosize
+          minRows={2}
+          maxRows={4}
+          maxLength={500}
+          radius="md"
+        />
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button
+            color={submitColor}
+            loading={loading}
+            disabled={!at}
+            onClick={() =>
+              at && onSubmit({ occurredAt: at.toISOString(), note: note.trim() })
+            }
+          >
+            {submitLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}