trains, wagons,containers and cargoes schema and API

apps/edr-freight-web/backoffice/src/components/trains/TrainDetailCard.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Train } from '@/services/trainService';
+
+export function TrainDetailCard({ train }: { train: Train }) {
+  return (
+    <Card>
+      <CardHeader><CardTitle>{train.trainNumber || train.code} - {train.trainName || 'Unnamed'}</CardTitle></CardHeader>
+      <CardContent className="grid md:grid-cols-2 gap-4">
+        <div><span className="font-medium">Status:</span> {train.status}</div>
+        <div><span className="font-medium">Capacity:</span> {train.capacityTons} tons</div>
+        <div><span className="font-medium">Origin:</span> {train.originStationId || '-'}</div>
+        <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
+        <div><span className="font-medium">Departure:</span> {train.departureTime ? new Date(train.departureTime).toLocaleString() : '-'}</div>
+        <div><span className="font-medium">Arrival:</span> {train.arrivalTime ? new Date(train.arrivalTime).toLocaleString() : '-'}</div>
+        {train.remarks && <div className="col-span-2"><span className="font-medium">Remarks:</span> {train.remarks}</div>}
+      </CardContent>
+    </Card>
+  );
+}

apps/edr-freight-web/backoffice/src/components/trains/TrainFormDialog.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useCreateTrain, useUpdateTrain } from '@/hooks/useTrains';
+import { useToast } from '@/hooks/use-toast';
+
+interface TrainFormDialogProps {
+  trigger?: React.ReactNode;
+  train?: any;
+  onSuccess?: () => void;
+}
+
+export function TrainFormDialog({ trigger, train, onSuccess }: TrainFormDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({ code: '', capacityTons: 0, trainNumber: '', trainName: '' });
+  const createTrain = useCreateTrain();
+  const updateTrain = useUpdateTrain();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (train) setForm({
+      code: train.code,
+      capacityTons: train.capacityTons,
+      trainNumber: train.trainNumber || '',
+      trainName: train.trainName || '',
+    });
+  }, [train]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (train) await updateTrain.mutateAsync({ id: train.id, data: form });
+      else await createTrain.mutateAsync(form);
+      toast({ title: train ? 'Train updated' : 'Train created', description: `${form.code} saved.` });
+      setOpen(false);
+      onSuccess?.();
+    } catch {
+      toast({ title: 'Error', description: `Failed to ${train ? 'update' : 'create'} train.`, variant: 'destructive' });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger || <Button>New Train</Button>}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{train ? 'Edit Train' : 'Create Train'}</DialogTitle></DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div><Label>Code*</Label><Input required value={form.code} onChange={e => setForm({...form, code: e.target.value})} /></div>
+          <div><Label>Capacity (tons)*</Label><Input type="number" required value={form.capacityTons} onChange={e => setForm({...form, capacityTons: parseFloat(e.target.value)})} /></div>
+          <div><Label>Train Number</Label><Input value={form.trainNumber} onChange={e => setForm({...form, trainNumber: e.target.value})} /></div>
+          <div><Label>Train Name</Label><Input value={form.trainName} onChange={e => setForm({...form, trainName: e.target.value})} /></div>
+          <Button type="submit" disabled={createTrain.isPending || updateTrain.isPending}>Save</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/edr-freight-web/backoffice/src/components/trains/TrainsTable.tsx

@@ -0,0 +1,45 @@
+import { useTrains, useDeleteTrain } from '@/hooks/useTrains';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Eye, Trash2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+export function TrainsTable() {
+  const { data: trains, isLoading } = useTrains();
+  const deleteTrain = useDeleteTrain();
+
+  if (isLoading) return <div>Loading trains...</div>;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Number</TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Capacity (tons)</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {trains?.map(train => (
+          <TableRow key={train.id}>
+            <TableCell>{train.trainNumber || train.code}</TableCell>
+            <TableCell>{train.trainName || '-'}</TableCell>
+            <TableCell><Badge variant="outline">{train.status}</Badge></TableCell>
+            <TableCell>{train.capacityTons}</TableCell>
+            <TableCell className="flex space-x-2">
+              <Link to={`/trains/${train.id}`}>
+                <Button variant="ghost" size="icon"><Eye className="h-4 w-4" /></Button>
+              </Link>
+              <Button variant="ghost" size="icon" onClick={() => deleteTrain.mutate(train.id)}>
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}