mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
573 lines
21 KiB
TypeScript
573 lines
21 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { Plus, Edit, Trash2, X, Search } from 'lucide-react';
|
|
import DataTable from '@/components/ui/DataTable';
|
|
import Badge from '@/components/ui/Badge';
|
|
import ActionButton from '@/components/ui/ActionButton';
|
|
import Modal from '@/components/ui/Modal';
|
|
import ConfirmDialog from '@/components/ui/ConfirmDialog';
|
|
import { routesApi } from '@/lib/api/routes';
|
|
import { stationsApi } from '@/lib/api';
|
|
|
|
interface RouteStop {
|
|
stationId: string;
|
|
sequence: number;
|
|
distanceKm?: number;
|
|
distanceFromOrigin?: number;
|
|
}
|
|
|
|
export default function RoutesPage() {
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [editingRoute, setEditingRoute] = useState<any>(null);
|
|
const [stops, setStops] = useState<RouteStop[]>([]);
|
|
const [originStationId, setOriginStationId] = useState('');
|
|
const [destinationStationId, setDestinationStationId] = useState('');
|
|
const [destinationDistance, setDestinationDistance] = useState<number | undefined>(undefined);
|
|
const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; route: any | null }>({ isOpen: false, route: null });
|
|
const [search, setSearch] = useState('');
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: routes, isLoading: routesLoading } = useQuery({
|
|
queryKey: ['routes'],
|
|
queryFn: async () => {
|
|
const result = await routesApi.getAll();
|
|
console.log('Routes query result:', result);
|
|
return result;
|
|
},
|
|
});
|
|
|
|
const { data: stations } = useQuery({
|
|
queryKey: ['stations'],
|
|
queryFn: stationsApi.getAll,
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: routesApi.create,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['routes'] });
|
|
setShowModal(false);
|
|
setEditingRoute(null);
|
|
},
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: any }) => routesApi.update(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['routes'] });
|
|
setShowModal(false);
|
|
setEditingRoute(null);
|
|
},
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: routesApi.delete,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['routes'] });
|
|
},
|
|
});
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
|
|
if (!originStationId || !destinationStationId) {
|
|
alert('Please select origin and destination stations');
|
|
return;
|
|
}
|
|
|
|
if (originStationId === destinationStationId) {
|
|
alert('Origin and destination must be different');
|
|
return;
|
|
}
|
|
|
|
// Keep current stop order (already rearranged by user)
|
|
const sortedMiddleStops = stops;
|
|
|
|
// Calculate distanceKm (distance from previous stop)
|
|
const stopsArray = [
|
|
{ stationId: originStationId, sequence: 1, distanceKm: 0 },
|
|
...sortedMiddleStops.map((stop, idx) => {
|
|
const prevDistance = idx === 0 ? 0 : (sortedMiddleStops[idx - 1].distanceFromOrigin || 0);
|
|
return {
|
|
stationId: stop.stationId,
|
|
sequence: idx + 2,
|
|
distanceKm: (stop.distanceFromOrigin || 0) - prevDistance,
|
|
};
|
|
}),
|
|
{
|
|
stationId: destinationStationId,
|
|
sequence: sortedMiddleStops.length + 2,
|
|
distanceKm: (destinationDistance || 0) - (sortedMiddleStops.length > 0 ? (sortedMiddleStops[sortedMiddleStops.length - 1].distanceFromOrigin || 0) : 0),
|
|
},
|
|
];
|
|
|
|
const routeData = {
|
|
code: formData.get('code') as string,
|
|
name: formData.get('name') as string,
|
|
description: formData.get('description') as string || undefined,
|
|
effectiveFrom: formData.get('effectiveFrom') as string,
|
|
effectiveUntil: formData.get('effectiveUntil') as string || undefined,
|
|
stops: stopsArray,
|
|
};
|
|
|
|
console.log('Submitting route data:', JSON.stringify(routeData, null, 2));
|
|
|
|
if (editingRoute) {
|
|
await updateMutation.mutateAsync({ id: editingRoute.id, data: routeData });
|
|
} else {
|
|
await createMutation.mutateAsync(routeData);
|
|
}
|
|
};
|
|
|
|
const addStop = () => {
|
|
setStops([...stops, { stationId: '', sequence: stops.length + 1, distanceFromOrigin: 0 }]);
|
|
};
|
|
|
|
const removeStop = (index: number) => {
|
|
setStops(stops.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const updateStop = (index: number, field: keyof RouteStop, value: any) => {
|
|
const updated = [...stops];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
setStops(updated);
|
|
};
|
|
|
|
const handleDragStart = (e: React.DragEvent, index: number) => {
|
|
e.dataTransfer.setData('text/plain', index.toString());
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
(e.currentTarget as HTMLElement).style.opacity = '0.5';
|
|
};
|
|
|
|
const handleDragLeave = (e: React.DragEvent) => {
|
|
(e.currentTarget as HTMLElement).style.opacity = '1';
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent, targetIndex: number) => {
|
|
e.preventDefault();
|
|
(e.currentTarget as HTMLElement).style.opacity = '1';
|
|
const sourceIndex = parseInt(e.dataTransfer.getData('text/plain'));
|
|
if (sourceIndex === targetIndex) return;
|
|
const newStops = [...stops];
|
|
const [draggedStop] = newStops.splice(sourceIndex, 1);
|
|
newStops.splice(targetIndex, 0, draggedStop);
|
|
setStops(newStops);
|
|
};
|
|
|
|
const generateRouteCode = (originId: string, destId: string) => {
|
|
if (!originId || !destId) return '';
|
|
const origin = stations?.items?.find((s: any) => s.id === originId);
|
|
const dest = stations?.items?.find((s: any) => s.id === destId);
|
|
return origin && dest ? `${origin.code}-${dest.code}` : '';
|
|
};
|
|
|
|
const generateRouteName = (originId: string, destId: string) => {
|
|
if (!originId || !destId) return '';
|
|
const origin = stations?.items?.find((s: any) => s.id === originId);
|
|
const dest = stations?.items?.find((s: any) => s.id === destId);
|
|
return origin && dest ? `${origin.name} - ${dest.name}` : '';
|
|
};
|
|
|
|
const handleDelete = (route: any) => {
|
|
setDeleteConfirm({ isOpen: true, route });
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
if (deleteConfirm.route) {
|
|
await deleteMutation.mutateAsync(deleteConfirm.route.id);
|
|
setDeleteConfirm({ isOpen: false, route: null });
|
|
}
|
|
};
|
|
|
|
const routeColumns = [
|
|
{ key: 'code', label: 'Route Code', sortable: true },
|
|
{ key: 'name', label: 'Route Name', sortable: true },
|
|
{ key: 'description', label: 'Description', render: (route: any) => route.description || 'N/A' },
|
|
{
|
|
key: 'active',
|
|
label: 'Status',
|
|
render: (route: any) => (
|
|
<Badge variant="status" status={route.active ? 'CONFIRMED' : 'CANCELLED'}>
|
|
{route.active ? 'Active' : 'Inactive'}
|
|
</Badge>
|
|
),
|
|
},
|
|
];
|
|
|
|
const filteredRoutes = (routes as any)?.items || (Array.isArray(routes) ? routes : []);
|
|
const displayedRoutes = filteredRoutes.filter((route: any) => {
|
|
if (!search) return true;
|
|
const searchLower = search.toLowerCase();
|
|
return (
|
|
route.code?.toLowerCase().includes(searchLower) ||
|
|
route.name?.toLowerCase().includes(searchLower) ||
|
|
route.description?.toLowerCase().includes(searchLower)
|
|
);
|
|
});
|
|
|
|
const routeActions = [
|
|
{
|
|
label: 'Edit',
|
|
onClick: (route: any) => {
|
|
setEditingRoute(route);
|
|
const routeStops = route.stops || [];
|
|
if (routeStops.length >= 2) {
|
|
setOriginStationId(routeStops[0].stationId);
|
|
setDestinationStationId(routeStops[routeStops.length - 1].stationId);
|
|
|
|
// Last stop's distanceKm is already cumulative from origin
|
|
setDestinationDistance(routeStops[routeStops.length - 1].distanceKm || 0);
|
|
|
|
const middleStops = routeStops.slice(1, -1).map((stop: any) => ({
|
|
stationId: stop.stationId,
|
|
sequence: stop.sequence,
|
|
distanceKm: stop.distanceKm,
|
|
distanceFromOrigin: stop.distanceKm || 0,
|
|
}));
|
|
setStops(middleStops);
|
|
}
|
|
setShowModal(true);
|
|
},
|
|
variant: 'secondary' as const,
|
|
icon: Edit,
|
|
},
|
|
{
|
|
label: 'Delete',
|
|
onClick: handleDelete,
|
|
variant: 'danger' as const,
|
|
icon: Trash2,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Routes</h1>
|
|
<p className="text-muted-foreground">Manage railway routes</p>
|
|
</div>
|
|
<ActionButton
|
|
icon={Plus}
|
|
onClick={() => {
|
|
setEditingRoute(null);
|
|
setOriginStationId('');
|
|
setDestinationStationId('');
|
|
setDestinationDistance(undefined);
|
|
setStops([]);
|
|
setSearch('');
|
|
setShowModal(true);
|
|
}}
|
|
>
|
|
Add Route
|
|
</ActionButton>
|
|
</div>
|
|
|
|
<div className="relative mb-6">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by code, name, or description..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="input pl-10 w-full"
|
|
/>
|
|
</div>
|
|
|
|
<DataTable
|
|
data={displayedRoutes}
|
|
columns={routeColumns}
|
|
actions={routeActions}
|
|
loading={routesLoading}
|
|
emptyMessage={search ? "No routes match your search" : "No routes found"}
|
|
/>
|
|
|
|
<ConfirmDialog
|
|
isOpen={deleteConfirm.isOpen}
|
|
onClose={() => setDeleteConfirm({ isOpen: false, route: null })}
|
|
onConfirm={confirmDelete}
|
|
title="Delete Route"
|
|
message={`Are you sure you want to delete ${deleteConfirm.route?.name}?`}
|
|
confirmText="Delete"
|
|
isDanger={true}
|
|
warning="This route may be referenced by schedules and bookings. Deleting it may impact these systems."
|
|
/>
|
|
|
|
<Modal
|
|
isOpen={showModal}
|
|
onClose={() => {
|
|
setShowModal(false);
|
|
setEditingRoute(null);
|
|
setOriginStationId('');
|
|
setDestinationStationId('');
|
|
setDestinationDistance(undefined);
|
|
setStops([]);
|
|
setSearch('');
|
|
}}
|
|
title={`${editingRoute ? 'Edit' : 'Add'} Route`}
|
|
size="lg"
|
|
>
|
|
<form onSubmit={handleSubmit} className="space-y-4 max-h-[calc(100vh-200px)] overflow-y-auto">
|
|
{editingRoute && (
|
|
<div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 p-3 text-sm text-yellow-800 dark:text-yellow-200">
|
|
<p className="font-semibold">⚠ Warning</p>
|
|
<p className="mt-1">Editing this route may impact schedules, trips, and bookings that reference it. Proceed with caution.</p>
|
|
</div>
|
|
)}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="label">Origin Station *</label>
|
|
<select
|
|
className="input"
|
|
value={originStationId}
|
|
onChange={(e) => setOriginStationId(e.target.value)}
|
|
required
|
|
disabled={!!editingRoute}
|
|
>
|
|
<option value="">Select Origin</option>
|
|
{stations?.items?.map((station: any) => (
|
|
<option key={station.id} value={station.id}>
|
|
{station.name} ({station.code})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="label">Destination Station *</label>
|
|
<select
|
|
className="input"
|
|
value={destinationStationId}
|
|
onChange={(e) => setDestinationStationId(e.target.value)}
|
|
required
|
|
disabled={!!editingRoute}
|
|
>
|
|
<option value="">Select Destination</option>
|
|
{stations?.items?.map((station: any) => (
|
|
<option key={station.id} value={station.id}>
|
|
{station.name} ({station.code})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="label">Route Code *</label>
|
|
<input
|
|
type="text"
|
|
name="code"
|
|
className="input"
|
|
value={generateRouteCode(originStationId, destinationStationId)}
|
|
readOnly
|
|
required
|
|
placeholder="Select stations to generate"
|
|
disabled={!!editingRoute}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="label">Route Name *</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
className="input"
|
|
value={generateRouteName(originStationId, destinationStationId)}
|
|
readOnly
|
|
required
|
|
placeholder="Select stations to generate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="label">Description</label>
|
|
<textarea
|
|
name="description"
|
|
className="input"
|
|
rows={2}
|
|
defaultValue={editingRoute?.description}
|
|
placeholder="Outbound local route from [Origin] to [Destination]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="label">Effective From *</label>
|
|
<input
|
|
type="datetime-local"
|
|
name="effectiveFrom"
|
|
className="input"
|
|
defaultValue={editingRoute?.effectiveFrom ? new Date(editingRoute.effectiveFrom).toISOString().slice(0, 16) : new Date().toISOString().slice(0, 16)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="label">Effective Until</label>
|
|
<input
|
|
type="datetime-local"
|
|
name="effectiveUntil"
|
|
className="input"
|
|
defaultValue={editingRoute?.effectiveUntil ? new Date(editingRoute.effectiveUntil).toISOString().slice(0, 16) : ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t pt-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<label className="label mb-0">Route Stops</label>
|
|
<span className="text-xs text-muted-foreground">Drag to rearrange intermediate stops</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2 items-center p-3 bg-primary/10 rounded border-2 border-primary">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-sm font-medium">
|
|
1
|
|
</div>
|
|
<div className="flex-1 font-medium">
|
|
{originStationId ? (
|
|
<span>
|
|
{stations?.items?.find((s: any) => s.id === originStationId)?.name || 'Unknown'}
|
|
{' '}({stations?.items?.find((s: any) => s.id === originStationId)?.code || 'N/A'})
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">Select origin station above</span>
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
0 km
|
|
</div>
|
|
</div>
|
|
|
|
{stops.map((stop, index) => (
|
|
<div
|
|
key={index}
|
|
draggable
|
|
onDragStart={(e) => handleDragStart(e, index)}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={(e) => handleDrop(e, index)}
|
|
className="flex gap-2 items-center p-3 bg-muted/50 rounded cursor-move hover:bg-muted transition-colors"
|
|
>
|
|
<div className="flex-shrink-0 w-8 h-8 bg-secondary text-secondary-foreground rounded-full flex items-center justify-center text-sm font-medium">
|
|
{index + 2}
|
|
</div>
|
|
<div className="flex-1">
|
|
<select
|
|
className="input input-sm"
|
|
value={stop.stationId}
|
|
onChange={(e) => updateStop(index, 'stationId', e.target.value)}
|
|
required
|
|
>
|
|
<option value="">Select Station</option>
|
|
{stations?.items?.filter((s: any) =>
|
|
s.id !== originStationId &&
|
|
s.id !== destinationStationId &&
|
|
!stops.some((st, idx) => idx !== index && st.stationId === s.id)
|
|
).map((station: any) => (
|
|
<option key={station.id} value={station.id}>
|
|
{station.name} ({station.code})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="w-32">
|
|
<input
|
|
type="number"
|
|
className="input input-sm"
|
|
placeholder="km"
|
|
value={stop.distanceFromOrigin || ''}
|
|
onChange={(e) => updateStop(index, 'distanceFromOrigin', e.target.value ? parseFloat(e.target.value) : undefined)}
|
|
min="0"
|
|
step="0.1"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeStop(index)}
|
|
className="flex-shrink-0 p-1 text-destructive hover:bg-destructive/10 rounded"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
{originStationId && destinationStationId && (
|
|
<div className="flex justify-center py-2">
|
|
<ActionButton
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
icon={Plus}
|
|
onClick={addStop}
|
|
>
|
|
Add Intermediate Stop
|
|
</ActionButton>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 items-center p-3 bg-primary/10 rounded border-2 border-primary">
|
|
<div className="flex-shrink-0 w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-sm font-medium">
|
|
{stops.length + 2}
|
|
</div>
|
|
<div className="flex-1 font-medium">
|
|
{destinationStationId ? (
|
|
<span>
|
|
{stations?.items?.find((s: any) => s.id === destinationStationId)?.name || 'Unknown'}
|
|
{' '}({stations?.items?.find((s: any) => s.id === destinationStationId)?.code || 'N/A'})
|
|
</span>
|
|
) : (
|
|
<span className="text-muted-foreground">Select destination station above</span>
|
|
)}
|
|
</div>
|
|
<div className="w-32">
|
|
{destinationStationId && (
|
|
<input
|
|
type="number"
|
|
className="input input-sm"
|
|
placeholder="km"
|
|
value={destinationDistance || ''}
|
|
onChange={(e) => setDestinationDistance(e.target.value ? parseFloat(e.target.value) : undefined)}
|
|
min="0"
|
|
step="0.1"
|
|
required
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<ActionButton
|
|
type="button"
|
|
variant="secondary"
|
|
onClick={() => {
|
|
setShowModal(false);
|
|
setEditingRoute(null);
|
|
setOriginStationId('');
|
|
setDestinationStationId('');
|
|
setDestinationDistance(undefined);
|
|
setStops([]);
|
|
setSearch('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</ActionButton>
|
|
<ActionButton
|
|
type="submit"
|
|
loading={createMutation.isPending || updateMutation.isPending}
|
|
>
|
|
{editingRoute ? 'Update' : 'Create'} Route
|
|
</ActionButton>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|