mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 01:48:12 +00:00
feat(wagons): audited maintenance/availability toggle
This commit is contained in:
Marshal
@@ -0,0 +1,226 @@
|
||||
import { useState } from "react";
|
||||
import { Freight } from "@edr/types";
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
Stack,
|
||||
Table,
|
||||
Text,
|
||||
Textarea,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { Activity, ArrowRight } from "lucide-react";
|
||||
|
||||
import { api } from "@/services/api";
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { formatFleetCell } from "@/components/fleet/fleetFormat";
|
||||
import type { FleetRecord } from "@/services/fleet/fleet.service";
|
||||
import type { WagonStatusLog } from "@/services/wagon.service";
|
||||
|
||||
export interface WagonStatusActionsProps {
|
||||
record: FleetRecord;
|
||||
/** Caller's wagons-update permission — the toggle hides without it. */
|
||||
canUpdate: boolean;
|
||||
}
|
||||
|
||||
const AVAILABLE = Freight.WagonStatus.Available;
|
||||
const MAINTENANCE = Freight.WagonStatus.Maintenance;
|
||||
|
||||
const fmt = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
return Number.isNaN(d.getTime()) ? iso : d.toLocaleString();
|
||||
};
|
||||
|
||||
/**
|
||||
* Wagons-only row actions on the fleet desk: an availability/maintenance
|
||||
* toggle (with confirm + optional note, audited server-side) and the wagon's
|
||||
* status-change history.
|
||||
*/
|
||||
const WagonStatusActions = ({ record, canUpdate }: WagonStatusActionsProps) => {
|
||||
const r = record as unknown as Record<string, unknown>;
|
||||
const id = r.id ? String(r.id) : "";
|
||||
const wagonNumber = r.wagonNumber ? String(r.wagonNumber) : "";
|
||||
const status = String(r.status ?? "");
|
||||
const { toast } = useToast();
|
||||
const { user } = useAuth();
|
||||
// Dedicated statusToggle key lets operations/OCC flip readiness without
|
||||
// holding full wagon edit; full editors keep the button too.
|
||||
const canToggle =
|
||||
canUpdate || hasPermission(user, FREIGHT_PERMS.wagons.statusToggle);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [historyOpen, setHistoryOpen] = useState(false);
|
||||
const [note, setNote] = useState("");
|
||||
|
||||
// Only these two statuses toggle — ASSIGNED/DETAINED/... have their own flows.
|
||||
const target =
|
||||
status === MAINTENANCE ? AVAILABLE : status === AVAILABLE ? MAINTENANCE : null;
|
||||
|
||||
const setStatus = useMutation(api.wagons.bulkSetStatus.mutationOptions());
|
||||
|
||||
const { data: logs = [], isLoading: logsLoading } = useQuery(
|
||||
api.wagons.statusHistory.queryOptions({
|
||||
input: { id },
|
||||
enabled: historyOpen && Boolean(id),
|
||||
}),
|
||||
);
|
||||
|
||||
const closeConfirm = () => {
|
||||
setConfirmOpen(false);
|
||||
setNote("");
|
||||
};
|
||||
|
||||
const handleConfirm = async () => {
|
||||
if (!target || !id) return;
|
||||
try {
|
||||
await setStatus.mutateAsync({
|
||||
wagonIds: [id],
|
||||
status: target,
|
||||
note: note.trim() || undefined,
|
||||
});
|
||||
toast({
|
||||
title:
|
||||
target === AVAILABLE
|
||||
? `Wagon ${wagonNumber} marked available`
|
||||
: `Wagon ${wagonNumber} sent to maintenance`,
|
||||
});
|
||||
closeConfirm();
|
||||
} catch (err: unknown) {
|
||||
const message =
|
||||
(err as { response?: { data?: { message?: string } } })?.response?.data
|
||||
?.message ?? "Status change failed";
|
||||
toast({
|
||||
title: "Status change failed",
|
||||
description: String(message),
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{canToggle && target ? (
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="light"
|
||||
color={target === AVAILABLE ? "edr-green" : "orange"}
|
||||
styles={{ label: { fontWeight: 500 } }}
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
>
|
||||
{target === AVAILABLE ? "Mark available" : "Send to maintenance"}
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
<Tooltip label="Status history">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
onClick={() => setHistoryOpen(true)}
|
||||
>
|
||||
<Activity size={16} strokeWidth={2} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<Modal
|
||||
opened={confirmOpen}
|
||||
onClose={closeConfirm}
|
||||
title={
|
||||
<Text fw={600}>
|
||||
{target === AVAILABLE ? "Mark available" : "Send to maintenance"}
|
||||
</Text>
|
||||
}
|
||||
radius="lg"
|
||||
centered
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<Text size="sm">
|
||||
Wagon{" "}
|
||||
<Text span fw={700}>
|
||||
{wagonNumber}
|
||||
</Text>
|
||||
</Text>
|
||||
{formatFleetCell(status, "statusBadge")}
|
||||
<ArrowRight size={14} />
|
||||
{formatFleetCell(target ?? "", "statusBadge")}
|
||||
</Group>
|
||||
<Textarea
|
||||
label="Note"
|
||||
placeholder="Optional note (e.g. reason for maintenance)"
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.currentTarget.value)}
|
||||
autosize
|
||||
minRows={2}
|
||||
/>
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={closeConfirm}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button loading={setStatus.isPending} onClick={handleConfirm}>
|
||||
Confirm
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
opened={historyOpen}
|
||||
onClose={() => setHistoryOpen(false)}
|
||||
title={<Text fw={600}>{`Status history — ${wagonNumber}`.trim()}</Text>}
|
||||
radius="lg"
|
||||
size="lg"
|
||||
centered
|
||||
>
|
||||
{logsLoading ? (
|
||||
<Center py="xl">
|
||||
<Loader size="sm" />
|
||||
</Center>
|
||||
) : logs.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" py="lg" size="sm">
|
||||
No status changes recorded yet.
|
||||
</Text>
|
||||
) : (
|
||||
<Table verticalSpacing="xs" highlightOnHover>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Date</Table.Th>
|
||||
<Table.Th>Change</Table.Th>
|
||||
<Table.Th>Note</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{(logs as WagonStatusLog[]).map((log) => (
|
||||
<Table.Tr key={log.id}>
|
||||
<Table.Td>
|
||||
<Text size="sm">{fmt(log.createdAt)}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
{formatFleetCell(log.fromStatus, "statusBadge")}
|
||||
<ArrowRight size={13} />
|
||||
{formatFleetCell(log.toStatus, "statusBadge")}
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" c={log.note ? undefined : "dimmed"}>
|
||||
{log.note ?? "—"}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WagonStatusActions;
|
||||
Reference in New Issue
Block a user