resolve confilict

2026-08-29 17:38:12 +00:00 · 2026-06-05 13:06:16 +03:00
parent ba65a3f4cc ec3f83c9fb
commit d59c192137
82 changed files with 3296 additions and 65 deletions
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -8,7 +8,11 @@ import {
  Paperclip,
  Settings,
  SlidersHorizontal,
-  TrainTrack,
+  Train,
+  Truck,
+  Container,
+  Package,
+  //TrainTrack,
 } from "lucide-react";

 import { FreightDashboardLayout, type SidebarItem, type SidebarSection } from "@/components/layout";
@@ -47,6 +51,11 @@ const filterRuleEngineChildren = (
 =======
 import TrainsPage from "./pages/trains/TrainsPage";
 import { getCategorySidebarChildren } from "./pages/ruleEngine/config/resources";
+//import TrainsPage from "./pages/trains/TrainsPage";
+import TrainDetailPage from "./pages/trains/TrainDetailPage";
+import WagonsPage from "./pages/wagons/WagonsPage";
+import ContainersPage from "./pages/containers_management/ContainersPage";
+import CargoesPage from "./pages/cargoes/CargoesPage";

 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
  {
@@ -66,11 +75,36 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
      {
        label: "Train scheduling",
        href: "/dashboard/operations/train-scheduling",
-        icon: <TrainTrack />,
+        icon: <Train />,
      },
      ...demoItems,
    ],
  },
+  {
+    title: "Fleet Management",
+    items: [
+      {
+        label: "Trains",
+        href: "/dashboard/trains",
+        icon: <Train />,
+      },
+      {
+        label: "Wagons",
+        href: "/dashboard/wagons",
+        icon: <Truck />,
+      },
+      {
+        label: "Containers",
+        href: "/dashboard/containers",
+        icon: <Container />,
+      },
+      {
+        label: "Cargoes",
+        href: "/dashboard/cargoes",
+        icon: <Package />,
+      },
+    ],
+  },
  {
    title: "Administration",
    items: [
@@ -330,11 +364,26 @@ const App = () => {
          <Route path="operations/train-scheduling" element={<TrainsPage />} />
 >>>>>>> bd6ad54eea229305a214d06081e0ffd27fe163b8

+<<<<<<< HEAD
        <Route path="user-management" element={<UserManagementPage />} />
        <Route path="user-management/users" element={<UsersPage />} />
        <Route path="user-management/position-types" element={<PositionTypesPage />} />
        <Route path="user-management/permissions" element={<PermissionsPage />} />
        <Route path="user-management/roles" element={<RolesPage />} />
+=======
+          <Route path="trains" element={<TrainsPage />} />
+          <Route path="trains/:id" element={<TrainDetailPage />} />
+          <Route path="wagons" element={<WagonsPage />} />
+          <Route path="containers" element={<ContainersPage />} />
+          <Route path="cargoes" element={<CargoesPage />} />
+
+          <Route path="user-management" element={<UserManagementPage />} />
+          <Route path="user-management/users" element={<UsersPage />} />
+          <Route path="user-management/position-types" element={<PositionTypesPage />} />
+          {/* <Route path="user-management/employees" element={<EmployeesPage />} /> */}
+          <Route path="user-management/permissions" element={<PermissionsPage />} />
+          <Route path="user-management/roles" element={<RolesPage />} />
+>>>>>>> ec3f83c9fb517bc0302e315bd3e35db501483751

        <Route path="file-settings" element={<FileUploadSettingsPage />} />
        <Route path="dropdown-settings" element={<DropdownSettingsPage />} />
--- a/apps/edr-freight-web/backoffice/src/auth/types.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/types.ts
@@ -55,3 +55,10 @@ export interface AuthTokens {
 export interface LoginResponse extends Partial<AuthTokens> {
  mfaRequired?: boolean;
 }
+
+// Additional types for Matrix form test
+export interface User {
+  id: string;
+  name: string;
+  role: "ADMIN" | "MANAGER" | "CHIEF_EXECUTIVE";
+}
--- a/apps/edr-freight-web/backoffice/src/auth/useAuth.ts
+++ b/apps/edr-freight-web/backoffice/src/auth/useAuth.ts
@@ -11,3 +11,5 @@ export const useAuth = () => {

  return context;
 };
+
+
--- a/apps/edr-freight-web/backoffice/src/components/baselineRatematrix/RateMatrixForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/baselineRatematrix/RateMatrixForm.tsx
@@ -0,0 +1,330 @@
+// components/baselineRatematrix/RateMatrixForm.tsx
+import React, { useState, useCallback } from 'react';
+// import { useForm } from 'react-hook-form';
+// import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Loader2, Save, Send, Shield, AlertTriangle } from 'lucide-react';
+import { RateTypeSection } from './RateTypeSection';
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { ValidationSummary } from './ValidationSummary';
+import { LoadingScreen } from '@/ui/LoadingScreen';
+import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
+import { useReferenceData } from '@/hooks/useReferenceData';
+import { queryKeys } from '@/constants/queryKeys';
+import { API_URLS } from '@/constants/apiUrls';
+import { 
+  RATE_TYPES, 
+  RATE_TYPE_LABELS, 
+  REQUIRED_RATE_TYPES 
+} from '@/constants/rateMatrixConstants';
+import { rateMatrixRulesEngine } from '../../ruleEngine/rateMatrixRules';
+import type { RateEntry } from './types';
+
+const formSchema = z.object({
+  matrixName: z.string().min(1, 'Matrix name is required').max(200),
+  effectiveDate: z.string().min(1, 'Effective date is required'),
+  expiryDate: z.string().optional(),
+  currency: z.string().min(1, 'Currency is required'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+const createInitialSections = (): RateEntry[] => {
+  return REQUIRED_RATE_TYPES.map(rateType => ({
+    rateType,
+    entries: [{
+      validFrom: '',
+      validTo: '',
+    }],
+  }));
+};
+
+export function RateMatrixForm() {
+  const [rateSections, setRateSections] = useState<RateEntry[]>(createInitialSections());
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [savedMatrixId, setSavedMatrixId] = useState<string | null>(null);
+  const [validationErrors, setValidationErrors] = useState<any[]>([]);
+  
+  const { isDirector } = useRateMatrixAuth();
+  const { data: referenceData, isLoading: isLoadingReference } = useReferenceData();
+  const queryClient = useQueryClient();
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      matrixName: '',
+      effectiveDate: '',
+      expiryDate: '',
+      currency: 'USD',
+    },
+  });
+
+  // Save draft mutation
+  const saveDraftMutation = useMutation({
+    mutationFn: async (data: FormData & { rateSections: RateEntry[] }) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.DRAFT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      if (!response.ok) throw new Error('Failed to save draft');
+      return response.json();
+    },
+    onSuccess: (data) => {
+      setSavedMatrixId(data.id);
+      queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
+      toast.success('Draft saved successfully');
+    },
+    onError: (error) => {
+      toast.error('Failed to save draft');
+    },
+  });
+
+  // Submit for approval mutation
+  const submitMutation = useMutation({
+    mutationFn: async (matrixId: string) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.SUBMIT(matrixId), {
+        method: 'POST',
+      });
+      if (!response.ok) throw new Error('Failed to submit');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.rateMatrix.all });
+      toast.success('Rate matrix submitted for executive approval and locked!');
+      setShowConfirmation(false);
+    },
+    onError: (error) => {
+      toast.error('Failed to submit for approval');
+      setShowConfirmation(false);
+    },
+  });
+
+  const handleValidate = useCallback(() => {
+    const validation = rateMatrixRulesEngine.validate(rateSections);
+    setValidationErrors([...validation.errors, ...validation.warnings]);
+    
+    if (validation.isValid) {
+      toast.success('All validations passed!');
+    }
+  }, [rateSections]);
+
+  const handleSaveDraft = async () => {
+    const formData = form.getValues();
+    await saveDraftMutation.mutateAsync({
+      ...formData,
+      rateSections,
+    });
+  };
+
+  const handleSubmitClick = async () => {
+    const isFormValid = await form.trigger();
+    if (!isFormValid) return;
+
+    const validation = rateMatrixRulesEngine.validate(rateSections);
+    setValidationErrors([...validation.errors, ...validation.warnings]);
+    
+    if (!validation.isValid) {
+      toast.error('Please fix validation errors before submitting');
+      return;
+    }
+
+    setShowConfirmation(true);
+  };
+
+  const handleConfirmSubmit = async () => {
+    const formData = form.getValues();
+    
+    try {
+      let matrixId = savedMatrixId;
+      
+      if (!matrixId) {
+        const draftResult = await saveDraftMutation.mutateAsync({
+          ...formData,
+          rateSections,
+        });
+        matrixId = draftResult.id;
+      }
+
+      await submitMutation.mutateAsync(matrixId!);
+    } catch (error) {
+      // Error handling done in mutations
+    }
+  };
+
+  if (isLoadingReference) {
+    return <LoadingScreen message="Loading reference data..." />;
+  }
+
+  if (!isDirector) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Access Denied</AlertTitle>
+          <AlertDescription>
+            Only Directors can access the rate matrix registration.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto py-8 px-4 max-w-7xl">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold tracking-tight">
+          Baseline Rate Matrix Registration
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Submit a comprehensive rate matrix for executive approval
+        </p>
+      </div>
+
+      {/* Director Warning */}
+      <Alert variant="warning" className="mb-6 border-amber-500 bg-amber-50">
+        <Shield className="h-4 w-4" />
+        <AlertTitle>Director Notice</AlertTitle>
+        <AlertDescription>
+          Once submitted, this matrix will be locked pending Chief Executive approval. 
+          No edits can be made by any user until authorization is granted.
+        </AlertDescription>
+      </Alert>
+
+      <form onSubmit={(e) => e.preventDefault()}>
+        {/* Matrix Metadata */}
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>Matrix Information</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-2">
+                <Label htmlFor="matrixName">Matrix Name *</Label>
+                <Input
+                  id="matrixName"
+                  {...form.register('matrixName')}
+                  placeholder="e.g., Q4 2026 Baseline Matrix"
+                  className={form.formState.errors.matrixName ? 'border-destructive' : ''}
+                />
+                {form.formState.errors.matrixName && (
+                  <p className="text-sm text-destructive">
+                    {form.formState.errors.matrixName.message}
+                  </p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="effectiveDate">Effective Date *</Label>
+                <Input
+                  id="effectiveDate"
+                  type="date"
+                  {...form.register('effectiveDate')}
+                  className={form.formState.errors.effectiveDate ? 'border-destructive' : ''}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiryDate">Expiry Date</Label>
+                <Input
+                  id="expiryDate"
+                  type="date"
+                  {...form.register('expiryDate')}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="currency">Currency *</Label>
+                <select
+                  id="currency"
+                  {...form.register('currency')}
+                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2"
+                >
+                  {referenceData?.currencies?.map((currency: any) => (
+                    <option key={currency.code} value={currency.code}>
+                      {currency.code} - {currency.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Rate Type Sections */}
+        <div className="space-y-6">
+          {rateSections.map((section, index) => (
+            <RateTypeSection
+              key={section.rateType}
+              section={section}
+              sectionIndex={index}
+              onUpdate={(updatedSection) => {
+                const newSections = [...rateSections];
+                newSections[index] = updatedSection;
+                setRateSections(newSections);
+              }}
+              referenceData={referenceData}
+            />
+          ))}
+        </div>
+
+        {/* Validation Errors */}
+        {validationErrors.length > 0 && (
+          <div className="mt-6">
+            <ValidationSummary errors={validationErrors} />
+          </div>
+        )}
+
+        {/* Form Actions */}
+        <div className="sticky bottom-6 mt-8 p-6 bg-background border rounded-lg shadow-lg flex gap-4 justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleSaveDraft}
+            disabled={saveDraftMutation.isPending}
+          >
+            {saveDraftMutation.isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="mr-2 h-4 w-4" />
+            )}
+            Save as Draft
+          </Button>
+          
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={handleValidate}
+          >
+            Validate All Rates
+          </Button>
+          
+          <Button
+            type="button"
+            onClick={handleSubmitClick}
+            disabled={submitMutation.isPending}
+          >
+            <Send className="mr-2 h-4 w-4" />
+            Submit for Executive Approval
+          </Button>
+        </div>
+      </form>
+
+      {/* Confirmation Dialog */}
+      <ConfirmationDialog
+        open={showConfirmation}
+        onOpenChange={setShowConfirmation}
+        onConfirm={handleConfirmSubmit}
+        isLoading={submitMutation.isPending}
+      />
+    </div>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/cargoes/CargoesTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/cargoes/CargoesTable.tsx
@@ -0,0 +1,46 @@
+import { useCargoesByContainer, useDeliverCargo, useUnloadCargo } from '@/hooks/useCargoes';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { LoadCargoDialog } from './LoadCargoDialog';
+import type { Cargo } from '@/services/cargoService';
+
+export function CargoesTable({ containerId }: { containerId: string }) {
+  const { data: cargoes, refetch } = useCargoesByContainer(containerId);
+  const deliver = useDeliverCargo();
+  const unload = useUnloadCargo();
+
+  if (!cargoes?.length) return <div className="text-muted-foreground">No cargoes for this container.</div>;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Reference</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead>Quantity</TableHead>
+          <TableHead>Weight (kg)</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {cargoes.map((cargo: Cargo) => (
+          <TableRow key={cargo.id}>
+            <TableCell>{cargo.cargoReference}</TableCell>
+            <TableCell>{cargo.description || '-'}</TableCell>
+            <TableCell>{cargo.quantity}</TableCell>
+            <TableCell>{cargo.weight}</TableCell>
+            <TableCell><Badge variant="outline">{cargo.status}</Badge></TableCell>
+            <TableCell className="space-x-2">
+              {cargo.status === 'PENDING' && <LoadCargoDialog cargoId={cargo.id} onSuccess={() => refetch()} />}
+              {cargo.status === 'LOADED' && <Button size="sm" onClick={() => deliver.mutateAsync(cargo.id).then(() => refetch())}>Deliver</Button>}
+              {cargo.status === 'LOADED' && <Button size="sm" variant="outline" onClick={() => unload.mutateAsync(cargo.id).then(() => refetch())}>Unload</Button>}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
--- a/apps/edr-freight-web/backoffice/src/components/cargoes/LoadCargoDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/cargoes/LoadCargoDialog.tsx
@@ -0,0 +1,38 @@
+import { useState } 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 { useLoadCargo } from '@/hooks/useCargoes';
+import { useToast } from '@/hooks/use-toast';
+
+export function LoadCargoDialog({ cargoId, onSuccess }: { cargoId: string; onSuccess?: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [quantity, setQuantity] = useState(0);
+  const [weight, setWeight] = useState(0);
+  const [volume, setVolume] = useState<number>();
+  const load = useLoadCargo();
+  const { toast } = useToast();
+
+  const handleLoad = async () => {
+    await load.mutateAsync({ id: cargoId, quantity, weight, volume });
+    toast({ title: 'Loaded', description: 'Cargo loaded into container.' });
+    setOpen(false);
+    onSuccess?.();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm">Load Cargo</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Load Cargo</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div><Label>Quantity*</Label><Input type="number" required value={quantity} onChange={e => setQuantity(parseFloat(e.target.value))} /></div>
+          <div><Label>Weight (kg)*</Label><Input type="number" required value={weight} onChange={e => setWeight(parseFloat(e.target.value))} /></div>
+          <div><Label>Volume (m³)</Label><Input type="number" value={volume ?? ''} onChange={e => setVolume(parseFloat(e.target.value) || undefined)} /></div>
+          <Button onClick={handleLoad} disabled={load.isPending}>Confirm Load</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/AssignContainerDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/AssignContainerDialog.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useContainers, useAssignContainerToWagon } from '@/hooks/useContainers';
+import { useToast } from '@/hooks/use-toast';
+import { Plus } from 'lucide-react';
+
+export function AssignContainerDialog({ wagonId }: { wagonId: string }) {
+  const [open, setOpen] = useState(false);
+  const [containerId, setContainerId] = useState('');
+  const [position, setPosition] = useState<number>();
+  const { data: containers } = useContainers();
+  const assign = useAssignContainerToWagon();
+  const { toast } = useToast();
+
+  const available = containers?.filter(c => c.status === 'AVAILABLE' && !c.wagonId);
+
+  const handleAssign = async () => {
+    if (!containerId) return;
+    await assign.mutateAsync({ containerId, wagonId, position });
+    toast({ title: 'Assigned', description: 'Container placed on wagon.' });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />Assign Container</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Assign Container to Wagon</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div><Label>Container</Label><Select value={containerId} onValueChange={setContainerId}><SelectTrigger><SelectValue placeholder="Select container" /></SelectTrigger><SelectContent>{available?.map(c => <SelectItem key={c.id} value={c.id}>{c.containerNumber}</SelectItem>)}</SelectContent></Select></div>
+          <div><Label>Position (optional)</Label><Input type="number" value={position ?? ''} onChange={e => setPosition(parseInt(e.target.value) || undefined)} /></div>
+          <Button onClick={handleAssign} disabled={assign.isPending}>Assign</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/ContainersTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/ContainersTable.tsx
@@ -0,0 +1,44 @@
+import { useContainersByWagon, useUnassignContainer } from '@/hooks/useContainers';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import type { Container } from '@/services/containerService';
+
+export function ContainersTable({ wagonId }: { wagonId: string }) {
+  const { data: containers, refetch } = useContainersByWagon(wagonId);
+  const unassign = useUnassignContainer();
+
+  if (!containers?.length) return <div className="text-muted-foreground">No containers assigned.</div>;
+
+  return (
+    <table className="w-full table-fixed">
+      <thead>
+        <tr>
+          <th className="text-left">Number</th>
+          <th className="text-left">Type</th>
+          <th className="text-left">Position</th>
+          <th className="text-left">Status</th>
+          <th className="text-left">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {containers.map((container: Container) => (
+          <tr key={container.id}>
+            <td className="py-2">{container.containerNumber}</td>
+            <td className="py-2">{container.containerTypeId}</td>
+            <td className="py-2">{container.position}</td>
+            <td className="py-2">{container.status}</td>
+            <td className="py-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => unassign.mutateAsync(container.id).then(() => refetch())}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/ContractType
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/ContractType
--- a/apps/edr-freight-web/backoffice/src/components/ruleEngine/rateMatrixRules.ts
+++ b/apps/edr-freight-web/backoffice/src/components/ruleEngine/rateMatrixRules.ts
@@ -0,0 +1,173 @@
+// ruleEngine/rateMatrixRules.ts
+import { RATE_TYPES, REQUIRED_RATE_TYPES, MATRIX_STATUS } from '@/constants/rateMatrixConstants';
+
+interface RateEntry {
+  rateType: string;
+  entries: Array<Record<string, any>>;
+}
+
+interface ValidationRule {
+  id: string;
+  description: string;
+  severity: 'error' | 'warning';
+  validate: (data: any) => boolean;
+  message: string;
+}
+
+export class RateMatrixRulesEngine {
+  private rules: ValidationRule[] = [];
+
+  constructor() {
+    this.initializeRules();
+  }
+
+  private initializeRules() {
+    // Rule 1: All rate types must be present
+    this.rules.push({
+      id: 'ALL_TYPES_REQUIRED',
+      description: 'Verify all 13 rate types are included',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const submittedTypes = rateSections.map(s => s.rateType);
+        return REQUIRED_RATE_TYPES.every(type => submittedTypes.includes(type));
+      },
+      message: 'All 13 rate types must be included in the submission',
+    });
+
+    // Rule 2: Each rate type must have at least one entry
+    this.rules.push({
+      id: 'MINIMUM_ENTRIES',
+      description: 'Each rate type requires at least one rate entry',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        return rateSections.every(section => section.entries.length > 0);
+      },
+      message: 'Each rate type must have at least one rate entry',
+    });
+
+    // Rule 3: Dates must be valid
+    this.rules.push({
+      id: 'VALID_DATES',
+      description: 'Rate entries must have valid date ranges',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        return rateSections.every(section =>
+          section.entries.every(entry => {
+            if (!entry.validFrom) return false;
+            if (entry.validTo && new Date(entry.validTo) <= new Date(entry.validFrom)) {
+              return false;
+            }
+            return true;
+          })
+        );
+      },
+      message: 'All rate entries must have valid dates (Valid To must be after Valid From)',
+    });
+
+    // Rule 4: Rates must be non-negative
+    this.rules.push({
+      id: 'NON_NEGATIVE_RATES',
+      description: 'All rate values must be non-negative',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const numericFields = ['baseRate', 'ratePerMetricTon', 'ratePerKm', 
+                               'ratePerTrip', 'ratePerDay', 'ratePerUnit'];
+        
+        return rateSections.every(section =>
+          section.entries.every(entry => {
+            return numericFields.every(field => {
+              const value = entry[field];
+              return value === undefined || value === '' || Number(value) >= 0;
+            });
+          })
+        );
+      },
+      message: 'Rate values cannot be negative',
+    });
+
+    // Rule 5: Business rule - Demurrage free days should be reasonable
+    this.rules.push({
+      id: 'DEMURRAGE_FREE_DAYS',
+      description: 'Demurrage free days should be between 0 and 30',
+      severity: 'warning',
+      validate: (rateSections: RateEntry[]) => {
+        const demurrageSection = rateSections.find(
+          s => s.rateType === RATE_TYPES.DEMURRAGE
+        );
+        if (!demurrageSection) return true;
+        
+        return demurrageSection.entries.every(entry => {
+          const freeDays = Number(entry.freeDays);
+          return !freeDays || (freeDays >= 0 && freeDays <= 30);
+        });
+      },
+      message: 'Demurrage free days typically range from 0 to 30 days',
+    });
+
+    // Rule 6: Cancellation fee percentage should be 0-100
+    this.rules.push({
+      id: 'CANCELLATION_FEE_RANGE',
+      description: 'Cancellation fee percentage must be between 0 and 100',
+      severity: 'error',
+      validate: (rateSections: RateEntry[]) => {
+        const cancellationSection = rateSections.find(
+          s => s.rateType === RATE_TYPES.CANCELLATION_FEE
+        );
+        if (!cancellationSection) return true;
+        
+        return cancellationSection.entries.every(entry => {
+          const percentage = Number(entry.cancellationFeePercentage);
+          return !percentage || (percentage >= 0 && percentage <= 100);
+        });
+      },
+      message: 'Cancellation fee percentage must be between 0 and 100',
+    });
+  }
+
+  validate(data: RateEntry[]) {
+    const errors: Array<{ ruleId: string; message: string; severity: string }> = [];
+    const warnings: Array<{ ruleId: string; message: string; severity: string }> = [];
+
+    this.rules.forEach(rule => {
+      if (!rule.validate(data)) {
+        const issue = {
+          ruleId: rule.id,
+          message: rule.message,
+          severity: rule.severity,
+        };
+        
+        if (rule.severity === 'error') {
+          errors.push(issue);
+        } else {
+          warnings.push(issue);
+        }
+      }
+    });
+
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings,
+    };
+  }
+
+  // Check if matrix can transition to a new status
+  canTransition(fromStatus: string, toStatus: string, userRole: string): boolean {
+    const transitions: Record<string, Array<{ to: string; allowedRoles: string[] }>> = {
+      [MATRIX_STATUS.DRAFT]: [
+        { to: MATRIX_STATUS.PENDING_APPROVAL, allowedRoles: ['Director'] },
+      ],
+      [MATRIX_STATUS.PENDING_APPROVAL]: [
+        { to: MATRIX_STATUS.ACTIVE, allowedRoles: ['Chief Executive'] },
+        { to: MATRIX_STATUS.REJECTED, allowedRoles: ['Chief Executive'] },
+      ],
+    };
+
+    const allowedTransitions = transitions[fromStatus] || [];
+    const transition = allowedTransitions.find(t => t.to === toStatus);
+    
+    return transition ? transition.allowedRoles.includes(userRole) : false;
+  }
+}
+
+export const rateMatrixRulesEngine = new RateMatrixRulesEngine();
--- a/apps/edr-freight-web/backoffice/src/components/trains/TrainDetailCard.tsx
+++ b/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>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/trains/TrainFormDialog.tsx
+++ b/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>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/trains/TrainsTable.tsx
+++ b/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>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/ui/badge.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ui/badge.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/apps/edr-freight-web/backoffice/src/components/ui/index.ts
+++ b/apps/edr-freight-web/backoffice/src/components/ui/index.ts
@@ -0,0 +1,8 @@
+export * from './table';
+export * from './badge';
+export * from './button';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './textarea';
+export * from './Breadcrumbs';
--- a/apps/edr-freight-web/backoffice/src/components/ui/table.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b outline-ring/50", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors bg-background hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 bg-muted first-of-type:pl-4 last-of-type:pr-4 first-of-type: p-2 py-4 text-left align-middle font-medium whitespace-nowrap text-secondary-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle first-of-type:pl-4 last-of-type:pr-4 whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
--- a/apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/AssignWagonDialog.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useWagons, useAssignWagonToTrain } from '@/hooks/useWagons';
+import { useToast } from '@/hooks/use-toast';
+import { Plus } from 'lucide-react';
+
+export function AssignWagonDialog({ trainId }: { trainId: string }) {
+  const [open, setOpen] = useState(false);
+  const [wagonId, setWagonId] = useState('');
+  const [sequence, setSequence] = useState<number>();
+  const { data: wagons } = useWagons();
+  const assign = useAssignWagonToTrain();
+  const { toast } = useToast();
+
+  const available = wagons?.filter(w => w.status === 'AVAILABLE' || !w.trainId);
+
+  const handleAssign = async () => {
+    if (!wagonId) return;
+    await assign.mutateAsync({ wagonId, trainId, sequenceNumber: sequence });
+    toast({ title: 'Assigned', description: 'Wagon attached to train.' });
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />Assign Wagon</Button></DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>Assign Wagon to Train</DialogTitle></DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label>Wagon</Label>
+            <Select value={wagonId} onValueChange={setWagonId}>
+              <SelectTrigger><SelectValue placeholder="Select wagon" /></SelectTrigger>
+              <SelectContent>
+                {available?.map(w => <SelectItem key={w.id} value={w.id}>{w.wagonNumber}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label>Sequence (optional)</Label>
+            <Input type="number" value={sequence ?? ''} onChange={e => setSequence(parseInt(e.target.value) || undefined)} />
+          </div>
+          <Button onClick={handleAssign} disabled={assign.isPending}>Assign</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
@@ -0,0 +1,71 @@
+// src/components/wagons/WagonFormDialog.tsx
+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 { useCreateWagon, useUpdateWagon } from '@/hooks/useWagons';
+import { useToast } from '@/hooks/use-toast';
+
+interface WagonFormDialogProps {
+  trigger?: React.ReactNode;
+  wagon?: any;
+  onSuccess?: () => void;
+}
+
+export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [form, setForm] = useState({
+    wagonNumber: '',
+    wagonTypeId: '',
+    tareWeight: 0,
+    maxPayloadWeight: 0,
+    status: 'AVAILABLE',
+    notes: ''
+  });
+  const createWagon = useCreateWagon();
+  const updateWagon = useUpdateWagon();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (wagon) setForm({
+      wagonNumber: wagon.wagonNumber,
+      wagonTypeId: wagon.wagonTypeId,
+      tareWeight: wagon.tareWeight,
+      maxPayloadWeight: wagon.maxPayloadWeight,
+      status: wagon.status,
+      notes: wagon.notes || ''
+    });
+  }, [wagon]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      if (wagon) await updateWagon.mutateAsync({ id: wagon.id, data: form });
+      else await createWagon.mutateAsync(form);
+      toast({ title: wagon ? 'Wagon updated' : 'Wagon created', description: `${form.wagonNumber} saved.` });
+      setOpen(false);
+      onSuccess?.();
+    } catch {
+      toast({ title: 'Error', description: `Failed to ${wagon ? 'update' : 'create'} wagon.`, variant: 'destructive' });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger || <Button>New Wagon</Button>}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader><DialogTitle>{wagon ? 'Edit Wagon' : 'Create Wagon'}</DialogTitle></DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div><Label>Wagon Number*</Label><Input required value={form.wagonNumber} onChange={e => setForm({...form, wagonNumber: e.target.value})} /></div>
+          <div><Label>Wagon Type ID*</Label><Input required value={form.wagonTypeId} onChange={e => setForm({...form, wagonTypeId: e.target.value})} /></div>
+          <div><Label>Tare Weight (kg)*</Label><Input type="number" required value={form.tareWeight} onChange={e => setForm({...form, tareWeight: parseFloat(e.target.value)})} /></div>
+          <div><Label>Max Payload (kg)*</Label><Input type="number" required value={form.maxPayloadWeight} onChange={e => setForm({...form, maxPayloadWeight: parseFloat(e.target.value)})} /></div>
+          <div><Label>Status</Label><Input value={form.status} onChange={e => setForm({...form, status: e.target.value})} /></div>
+          <div><Label>Notes</Label><Input value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} /></div>
+          <Button type="submit" disabled={createWagon.isPending || updateWagon.isPending}>Save</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonsTable.tsx
@@ -0,0 +1,63 @@
+import { useWagonsByTrain, useUnassignWagon, useReorderWagons } from '@/hooks/useWagons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Trash2, GripVertical } from 'lucide-react';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+
+export function WagonsTable({ trainId }: { trainId: string }) {
+  const { data: wagons, refetch } = useWagonsByTrain(trainId);
+  const unassign = useUnassignWagon();
+  const reorder = useReorderWagons();
+
+  const onDragEnd = (result: any) => {
+    if (!result.destination) return;
+    const items = Array.from(wagons || []);
+    const [removed] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, removed);
+    reorder.mutate({ trainId, wagonIds: items.map(w => w.id) });
+  };
+
+  if (!wagons?.length) return <div className="text-muted-foreground">No wagons assigned.</div>;
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="wagons">
+        {(provided) => (
+          <Table {...provided.droppableProps} ref={provided.innerRef}>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10"></TableHead>
+                <TableHead>Number</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Sequence</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {wagons.map((wagon, idx) => (
+                <Draggable key={wagon.id} draggableId={wagon.id} index={idx}>
+                  {(provided) => (
+                    <TableRow ref={provided.innerRef} {...provided.draggableProps}>
+                      <TableCell {...provided.dragHandleProps}><GripVertical className="h-4 w-4 cursor-grab" /></TableCell>
+                      <TableCell>{wagon.wagonNumber}</TableCell>
+                      <TableCell>{wagon.wagonTypeId}</TableCell>
+                      <TableCell>{wagon.sequenceNumber}</TableCell>
+                      <TableCell>{wagon.status}</TableCell>
+                      <TableCell>
+                        <Button variant="ghost" size="icon" onClick={() => unassign.mutateAsync(wagon.id).then(() => refetch())}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </TableBody>
+          </Table>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/constants/URLS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
@@ -156,4 +156,18 @@ export const URL_CONSTANTS = {
    APPROVAL_RULE_BY_ID: (id: string) => `/approval-rules/${id}`,
    APPROVAL_RULES_CHAIN: "/approval-rules/chain",
  },
+   RATE_MATRIX: {
+    BASE: '/api/rate-matrices',
+    DRAFT: '/api/rate-matrices/draft',
+    SUBMIT: (id: string) => `/api/rate-matrices/${id}/submit`,
+    AUTHORIZE: (id: string) => `/api/rate-matrices/${id}/authorize`,
+    LIST: '/api/rate-matrices',
+    DETAIL: (id: string) => `/api/rate-matrices/${id}`,
+  },
+  REFERENCE: {
+    PORTS: '/api/reference/ports',
+    CITIES: '/api/reference/cities',
+    CONTAINER_TYPES: '/api/reference/container-types',
+    CURRENCIES: '/api/reference/currencies',
+  },
 };
--- a/apps/edr-freight-web/backoffice/src/constants/rateMatrixConstants.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/rateMatrixConstants.ts
@@ -0,0 +1,60 @@
+// constants/rateMatrixConstants.ts
+export const RATE_TYPES = {
+  CONTAINER_IMPORT: 'container_import',
+  CONTAINER_EXPORT: 'container_export',
+  BULK_IMPORT: 'bulk_import',
+  BULK_EXPORT: 'bulk_export',
+  INTER_CITY_BULK: 'inter_city_bulk',
+  INTER_CITY_CONTAINER: 'inter_city_container',
+  FIRST_MILE: 'first_mile',
+  LAST_MILE: 'last_mile',
+  DEMURRAGE: 'demurrage',
+  LASHING: 'lashing',
+  DOUBLE_HANDLING: 'double_handling',
+  CONTAINER_WITH_RETURN: 'container_with_return',
+  CANCELLATION_FEE: 'cancellation_fee',
+} as const;
+
+export const RATE_TYPE_LABELS = {
+  [RATE_TYPES.CONTAINER_IMPORT]: 'Container Import Rates',
+  [RATE_TYPES.CONTAINER_EXPORT]: 'Container Export Rates',
+  [RATE_TYPES.BULK_IMPORT]: 'Bulk Import Rates',
+  [RATE_TYPES.BULK_EXPORT]: 'Bulk Export Rates',
+  [RATE_TYPES.INTER_CITY_BULK]: 'Inter City Bulk Rates',
+  [RATE_TYPES.INTER_CITY_CONTAINER]: 'Inter City Container Rates',
+  [RATE_TYPES.FIRST_MILE]: 'First Mile Cost Rates',
+  [RATE_TYPES.LAST_MILE]: 'Last Mile Cost Rates',
+  [RATE_TYPES.DEMURRAGE]: 'Demurrage Cost Rates',
+  [RATE_TYPES.LASHING]: 'Lashing Cost Rates',
+  [RATE_TYPES.DOUBLE_HANDLING]: 'Double Handling Cost Rates',
+  [RATE_TYPES.CONTAINER_WITH_RETURN]: 'Container With Return Cost Rates',
+  [RATE_TYPES.CANCELLATION_FEE]: 'Cancellation Fee Cost Rates',
+} as const;
+
+export const REQUIRED_RATE_TYPES = Object.values(RATE_TYPES);
+
+export const RATE_FIELDS_CONFIG = {
+  [RATE_TYPES.CONTAINER_IMPORT]: [
+    { name: 'portOfLoading', label: 'Port of Loading', type: 'text', required: true },
+    { name: 'portOfDischarge', label: 'Port of Discharge', type: 'text', required: true },
+    { name: 'containerType', label: 'Container Type', type: 'select', required: true },
+    { name: 'baseRate', label: 'Base Rate', type: 'number', required: true, min: 0, step: '0.01' },
+    { name: 'baf', label: 'Bunker Adjustment Factor', type: 'number', required: false, min: 0 },
+    { name: 'caf', label: 'Currency Adjustment Factor', type: 'number', required: false, min: 0 },
+  ],
+  [RATE_TYPES.DEMURRAGE]: [
+    { name: 'containerType', label: 'Container Type', type: 'select', required: true },
+    { name: 'freeDays', label: 'Free Days', type: 'number', required: true, min: 0 },
+    { name: 'ratePerDay', label: 'Rate per Day', type: 'number', required: true, min: 0 },
+    { name: 'maximumDays', label: 'Maximum Days', type: 'number', required: false, min: 1 },
+  ],
+  // ... define for all 13 rate types
+} as const;
+
+export const MATRIX_STATUS = {
+  DRAFT: 'draft',
+  PENDING_APPROVAL: 'pending_approval',
+  ACTIVE: 'active',
+  REJECTED: 'rejected',
+  EXPIRED: 'expired',
+} as const;
--- a/apps/edr-freight-web/backoffice/src/hooks/use-toast.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/use-toast.ts
@@ -0,0 +1,24 @@
+import toast from 'react-hot-toast';
+
+interface ToastOptions {
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'destructive';
+  duration?: number;
+}
+
+export function useToast() {
+  const showToast = (options: ToastOptions) => {
+    const { title, description, variant = 'default', duration = 3000 } = options;
+
+    const message = title ? `${title}${description ? ': ' + description : ''}` : description || '';
+
+    if (variant === 'destructive') {
+      toast.error(message, { duration });
+    } else {
+      toast.success(message, { duration });
+    }
+  };
+
+  return { toast: showToast };
+}
--- a/apps/edr-freight-web/backoffice/src/hooks/useCargoes.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useCargoes.ts
@@ -0,0 +1,39 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { cargoService } from '@/services/cargoService';
+
+export const cargoKeys = {
+  all: ['cargoes'] as const,
+  byContainer: (containerId: string) => [...cargoKeys.all, 'container', containerId] as const,
+};
+
+export function useCargoes() {
+  return useQuery({ queryKey: cargoKeys.all, queryFn: () => cargoService.getAll().then(res => res.data) });
+}
+
+export function useCargoesByContainer(containerId: string) {
+  return useQuery({ queryKey: cargoKeys.byContainer(containerId), queryFn: () => cargoService.getByContainer(containerId).then(res => res.data), enabled: !!containerId });
+}
+
+export function useLoadCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, quantity, weight, volume }: any) => cargoService.load(id, quantity, weight, volume),
+    onSuccess: (_, { id }) => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
+
+export function useDeliverCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => cargoService.deliver(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
+
+export function useUnloadCargo() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => cargoService.unload(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: cargoKeys.all })
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/hooks/useContainers.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useContainers.ts
@@ -0,0 +1,31 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { containerService } from '@/services/containerService';
+
+export const containerKeys = {
+  all: ['containers'] as const,
+  byWagon: (wagonId: string) => [...containerKeys.all, 'wagon', wagonId] as const,
+};
+
+export function useContainers() {
+  return useQuery({ queryKey: containerKeys.all, queryFn: () => containerService.getAll().then(res => res.data) });
+}
+
+export function useContainersByWagon(wagonId: string) {
+  return useQuery({ queryKey: containerKeys.byWagon(wagonId), queryFn: () => containerService.getByWagon(wagonId).then(res => res.data), enabled: !!wagonId });
+}
+
+export function useAssignContainerToWagon() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ containerId, wagonId, position }: any) => containerService.assignToWagon(containerId, wagonId, position),
+    onSuccess: (_, { wagonId }) => qc.invalidateQueries({ queryKey: containerKeys.byWagon(wagonId) })
+  });
+}
+
+export function useUnassignContainer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: containerService.unassign,
+    onSuccess: () => qc.invalidateQueries({ queryKey: containerKeys.all })
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/hooks/useTrains.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useTrains.ts
@@ -0,0 +1,35 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { trainService } from '@/services/trains.service';
+
+export const trainKeys = {
+  all: ['trains'] as const,
+  lists: () => [...trainKeys.all, 'list'] as const,
+  details: () => [...trainKeys.all, 'detail'] as const,
+  detail: (id: string) => [...trainKeys.details(), id] as const,
+};
+
+export function useTrains() {
+  return useQuery({ queryKey: trainKeys.lists(), queryFn: () => trainService.getAll().then(res => res.data) });
+}
+
+export function useTrain(id: string) {
+  return useQuery({ queryKey: trainKeys.detail(id), queryFn: () => trainService.getById(id).then(res => res.data), enabled: !!id });
+}
+
+export function useCreateTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: trainService.create, onSuccess: () => qc.invalidateQueries({ queryKey: trainKeys.lists() }) });
+}
+
+export function useUpdateTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ id, data }: any) => trainService.update(id, data), onSuccess: (_, { id }) => {
+    qc.invalidateQueries({ queryKey: trainKeys.lists() });
+    qc.invalidateQueries({ queryKey: trainKeys.detail(id) });
+  } });
+}
+
+export function useDeleteTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: trainService.delete, onSuccess: () => qc.invalidateQueries({ queryKey: trainKeys.lists() }) });
+}
--- a/apps/edr-freight-web/backoffice/src/hooks/useWagons.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWagons.ts
@@ -0,0 +1,41 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { wagonService } from '@/services/wagon.service';
+
+export const wagonKeys = {
+  all: ['wagons'] as const,
+  byTrain: (trainId: string) => [...wagonKeys.all, 'train', trainId] as const,
+  details: () => [...wagonKeys.all, 'detail'] as const,
+};
+
+export function useWagons() {
+  return useQuery({ queryKey: wagonKeys.all, queryFn: () => wagonService.getAll().then(res => res.data) });
+}
+
+export function useWagonsByTrain(trainId: string) {
+  return useQuery({ queryKey: wagonKeys.byTrain(trainId), queryFn: () => wagonService.getByTrain(trainId).then(res => res.data), enabled: !!trainId });
+}
+
+export function useAssignWagonToTrain() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ wagonId, trainId, sequenceNumber }: any) => wagonService.assignToTrain(wagonId, trainId, sequenceNumber), onSuccess: (_, { trainId }) => qc.invalidateQueries({ queryKey: wagonKeys.byTrain(trainId) }) });
+}
+
+export function useUnassignWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: wagonService.unassign, onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
+
+export function useReorderWagons() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ trainId, wagonIds }: any) => wagonService.reorder(trainId, wagonIds), onSuccess: (_, { trainId }) => qc.invalidateQueries({ queryKey: wagonKeys.byTrain(trainId) }) });
+}
+
+export function useCreateWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: wagonService.create, onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
+
+export function useUpdateWagon() {
+  const qc = useQueryClient();
+  return useMutation({ mutationFn: ({ id, data }: any) => wagonService.update(id, data), onSuccess: () => qc.invalidateQueries({ queryKey: wagonKeys.all }) });
+}
--- a/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixApproval.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixApproval.tsx
@@ -0,0 +1,117 @@
+// pages/admin/rateMatrix/RateMatrixApproval.tsx
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { LoadingScreen } from '@/ui/LoadingScreen';
+import { useRateMatrixAuth } from '@/auth/hooks/useAuth';
+import { queryKeys } from '../../../constants/QUERY_KEYS';
+import { API_URLS } from '@/constants/URL_CONSTANTS';
+//import { MATRIX_STATUS } from '@/constants/rateMatrixConstants';
+import { toast } from 'sonner';
+import { Navigate } from 'react-router-dom';
+
+export default function RateMatrixApprovalPage() {
+  const { isChiefExecutive } = useRateMatrixAuth();
+  const queryClient = useQueryClient();
+  const pendingMatricesQueryKey = [...queryKeys.rateMatrix.all, 'pending-approval'];
+
+  const { data: pendingMatrices, isLoading } = useQuery({
+    queryKey: pendingMatricesQueryKey,
+    queryFn: async () => {
+      const response = await fetch(`${API_URLS.RATE_MATRIX.LIST}?status=pending_approval`);
+      return response.json();
+    },
+  });
+
+  const authorizeMutation = useMutation({
+    mutationFn: async ({ matrixId, signature }: { matrixId: string; signature: string }) => {
+      const response = await fetch(API_URLS.RATE_MATRIX.AUTHORIZE(matrixId), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ digitalSignature: signature }),
+      });
+      if (!response.ok) throw new Error('Authorization failed');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: pendingMatricesQueryKey });
+      toast.success('Rate matrix authorized successfully!');
+    },
+    onError: () => {
+      toast.error('Failed to authorize rate matrix');
+    },
+  });
+
+  if (!isChiefExecutive) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  if (isLoading) return <LoadingScreen />;
+
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Pending Rate Matrix Approvals</h1>
+      
+      <div className="space-y-6">
+        {pendingMatrices?.map((matrix: any) => (
+          <Card key={matrix.id}>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                <span>{matrix.matrixName}</span>
+                <Badge variant="secondary">{matrix.status}</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm font-semibold">Effective Date</p>
+                    <p>{matrix.effectiveDate}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold">Submitted By</p>
+                    <p>{matrix.createdBy}</p>
+                  </div>
+                </div>
+                
+                <div>
+                  <p className="text-sm font-semibold mb-2">Rate Types Included:</p>
+                  <div className="flex flex-wrap gap-2">
+                    {matrix.rateEntries?.map((entry: any) => (
+                      <Badge key={entry.id} variant="outline">
+                        {entry.rateType}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="flex gap-4">
+                  <Button
+                    onClick={() => {
+                      // Implement digital signature collection
+                      const signature = prompt('Enter digital signature:');
+                      if (signature) {
+                        authorizeMutation.mutate({ 
+                          matrixId: matrix.id, 
+                          signature 
+                        });
+                      }
+                    }}
+                    disabled={authorizeMutation.isPending}
+                  >
+                    Authorize & Release
+                  </Button>
+                  <Button variant="outline">
+                    Request Changes
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixRegistration.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/admin/rateMatrix/RateMatrixRegistration.tsx
@@ -0,0 +1,25 @@
+// pages/admin/rateMatrix/RateMatrixRegistration.tsx
+import React from 'react';
+import { RateMatrixForm } from '@/components/baselineRatematrix/RateMatrixForm';
+import { useRateMatrixAuth } from '@/auth/useAuth';
+import { Navigate } from 'react-router-dom';
+// Local lightweight fallback for LoadingScreen to avoid import errors
+const LoadingScreen: React.FC<{ message?: string }> = ({ message = 'Loading...' }) => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+    <div>{message}</div>
+  </div>
+);
+
+export default function RateMatrixRegistrationPage() {
+  const { isDirector, isLoading } = useRateMatrixAuth();
+
+  if (isLoading) {
+    return <LoadingScreen message="Checking permissions..." />;
+  }
+
+  if (!isDirector) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  return <RateMatrixForm />;
+}
--- a/apps/edr-freight-web/backoffice/src/pages/cargoes/CargoesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/cargoes/CargoesPage.tsx
@@ -0,0 +1,34 @@
+import { useCargoes } from '@/hooks/useCargoes';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { LoadCargoDialog } from '@/components/cargoes/LoadCargoDialog';
+
+export default function CargoesPage() {
+  const { data: cargoes, refetch, isLoading } = useCargoes();
+  if (isLoading) return <div>Loading cargoes...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Cargoes</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Reference</TableHead><TableHead>Description</TableHead><TableHead>Quantity</TableHead><TableHead>Weight</TableHead><TableHead>Status</TableHead><TableHead>Actions</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {cargoes?.map(c => (
+              <TableRow key={c.id}>
+                <TableCell>{c.cargoReference}</TableCell>
+                <TableCell>{c.description || '-'}</TableCell>
+                <TableCell>{c.quantity}</TableCell>
+                <TableCell>{c.weight} kg</TableCell>
+                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
+                <TableCell>
+                  {c.status === 'PENDING' && <LoadCargoDialog cargoId={c.id} onSuccess={() => refetch()} />}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/pages/containers_management/ContainersPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/containers_management/ContainersPage.tsx
@@ -0,0 +1,29 @@
+import { useContainers } from '@/hooks/useContainers';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+
+export default function ContainersPage() {
+  const { data: containers, isLoading } = useContainers();
+  if (isLoading) return <div>Loading containers...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Containers</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Wagon</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {containers?.map(c => (
+              <TableRow key={c.id}>
+                <TableCell>{c.containerNumber}</TableCell>
+                <TableCell>{c.containerTypeId}</TableCell>
+                <TableCell>{c.wagonId || 'Unassigned'}</TableCell>
+                <TableCell><Badge variant="outline">{c.status}</Badge></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx
@@ -0,0 +1,33 @@
+import { useParams } from 'react-router-dom';
+import { useTrain } from '@/hooks/useTrains';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { AssignWagonDialog } from '@/components/AssignWagonDialog';
+import { WagonsTable } from '@/components/WagonsTable';
+
+export default function TrainDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { data: train, isLoading } = useTrain(id!);
+
+  if (isLoading) return <Skeleton className="h-96 w-full" />;
+  if (!train) return <div>Train not found</div>;
+
+  return (
+    <div className="space-y-6">
+      <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 Station:</span> {train.originStationId || '-'}</div>
+          <div><span className="font-medium">Destination:</span> {train.destinationStationId || '-'}</div>
+        </CardContent>
+      </Card>
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">Wagons</h2>
+        <AssignWagonDialog trainId={train.id} />
+      </div>
+      <WagonsTable trainId={train.id} />
+    </div>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trains/TrainsPage.tsx
@@ -1,3 +1,42 @@
+<<<<<<< HEAD
+import { useState } from 'react';
+import { useTrains, useDeleteTrain, useCreateTrain } 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+import { Plus, Eye, Trash2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const CreateTrainForm = ({ onSuccess }: { onSuccess: () => void }) => {
+  const [form, setForm] = useState({ code: '', capacityTons: 0, trainNumber: '', trainName: '' });
+  const createTrain = useCreateTrain();
+  const { toast } = useToast();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await createTrain.mutateAsync(form);
+      toast({ title: 'Train created', description: `${form.code} added.` });
+      onSuccess();
+    } catch {
+      toast({ title: 'Error', description: 'Failed to create train.', variant: 'destructive' });
+    }
+  };
+
+  return (
+    <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}>Save</Button>
+    </form>
+=======
 import { useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
@@ -755,7 +794,45 @@ const TrainsPage = () => {
        </DialogContent>
      </Dialog>
    </div>
+>>>>>>> 523d7e58422f1bde8024c2dd237092a7cf6aa190
  );
 };

-export default TrainsPage;
+export default function TrainsPage() {
+  const { data: trains, isLoading } = useTrains();
+  const deleteTrain = useDeleteTrain();
+  const [open, setOpen] = useState(false);
+
+  if (isLoading) return <div className="p-8">Loading trains...</div>;
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>Trains</CardTitle>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild><Button size="sm"><Plus className="mr-2 h-4 w-4" />New Train</Button></DialogTrigger>
+          <DialogContent><DialogHeader><DialogTitle>Create Train</DialogTitle></DialogHeader><CreateTrainForm onSuccess={() => setOpen(false)} /></DialogContent>
+        </Dialog>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Capacity</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} t</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>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/pages/wagons/WagonsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/wagons/WagonsPage.tsx
@@ -0,0 +1,29 @@
+import { useWagons } from '@/hooks/useWagons';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function WagonsPage() {
+  const { data: wagons, isLoading } = useWagons();
+  if (isLoading) return <div>Loading wagons...</div>;
+  return (
+    <Card>
+      <CardHeader><CardTitle>All Wagons</CardTitle></CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader><TableRow><TableHead>Number</TableHead><TableHead>Type</TableHead><TableHead>Train</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+          <TableBody>
+            {wagons?.map(w => (
+              <TableRow key={w.id}>
+                <TableCell>{w.wagonNumber}</TableCell>
+                <TableCell>{w.wagonTypeId}</TableCell>
+                <TableCell>{w.trainId || 'Unassigned'}</TableCell>
+                <TableCell><Badge variant="outline">{w.status}</Badge></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/services/cargoService.ts
+++ b/apps/edr-freight-web/backoffice/src/services/cargoService.ts
@@ -0,0 +1,26 @@
+import { apiClient } from '@/lib/axios';
+
+export interface Cargo {
+  id: string;
+  cargoReference: string;
+  shipmentId: string;
+  containerId: string;
+  cargoTypeId?: string;
+  description?: string;
+  quantity: number;
+  weight: number;
+  volume?: number;
+  status: 'PENDING' | 'LOADED' | 'IN_TRANSIT' | 'DELIVERED' | 'UNLOADED';
+  loadedAt?: string;
+  unloadedAt?: string;
+}
+
+export const cargoService = {
+  getAll: () => apiClient.get<Cargo[]>('/cargoes'),
+  getByContainer: (containerId: string) => apiClient.get<Cargo[]>(`/cargoes?containerId=${containerId}`),
+  create: (data: any) => apiClient.post('/cargoes', data),
+  load: (cargoId: string, quantity: number, weight: number, volume?: number) =>
+    apiClient.post(`/cargoes/${cargoId}/load`, { quantity, weight, volume }),
+  deliver: (cargoId: string) => apiClient.post(`/cargoes/${cargoId}/deliver`),
+  unload: (cargoId: string) => apiClient.post(`/cargoes/${cargoId}/unload`),
+};
--- a/apps/edr-freight-web/backoffice/src/services/containerService.ts
+++ b/apps/edr-freight-web/backoffice/src/services/containerService.ts
@@ -0,0 +1,21 @@
+import { apiClient } from '@/lib/axios';
+
+export interface Container {
+  id: string;
+  containerNumber: string;
+  containerTypeId: string;
+  wagonId: string | null;
+  position: number | null;
+  tareWeight: number;
+  maxGrossWeight: number;
+  sealNumber?: string;
+  status: string;
+}
+
+export const containerService = {
+  getAll: () => apiClient.get<Container[]>('/containers'),
+  getByWagon: (wagonId: string) => apiClient.get<Container[]>(`/containers?wagonId=${wagonId}`),
+  assignToWagon: (containerId: string, wagonId: string, position?: number) =>
+    apiClient.post(`/containers/${containerId}/assign-wagon`, { wagonId, position }),
+  unassign: (containerId: string) => apiClient.post(`/containers/${containerId}/unassign-wagon`),
+};
--- a/apps/edr-freight-web/backoffice/src/services/trains.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trains.service.ts
@@ -0,0 +1,26 @@
+import { apiClient } from '@/lib/axios';
+
+export interface Train {
+  id: string;
+  code: string;
+  capacityTons: number;
+  trainNumber?: string;
+  trainName?: string;
+  routeId?: string;
+  originStationId?: string;
+  destinationStationId?: string;
+  departureTime?: string;
+  arrivalTime?: string;
+  locomotiveNumber?: string;
+  status: string;
+  remarks?: string;
+}
+
+export const trainService = {
+  getAll: () => apiClient.get<Train[]>('/trains'),
+  getById: (id: string) => apiClient.get<Train>(`/trains/${id}`),
+  create: (data: Partial<Train>) => apiClient.post('/trains', data),
+  update: (id: string, data: Partial<Train>) => apiClient.patch(`/trains/${id}`, data),
+  delete: (id: string) => apiClient.delete(`/trains/${id}`),
+  getDetails: (id: string) => apiClient.get(`/trains/${id}/details`),
+};
--- a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
@@ -0,0 +1,26 @@
+import { apiClient } from '@/lib/axios';
+
+export interface Wagon {
+  id: string;
+  wagonNumber: string;
+  wagonTypeId: string;
+  trainId: string | null;
+  sequenceNumber: number | null;
+  tareWeight: number;
+  maxPayloadWeight: number;
+  status: string;
+  notes?: string;
+}
+
+export const wagonService = {
+  getAll: () => apiClient.get<Wagon[]>('/wagons'),
+  getByTrain: (trainId: string) => apiClient.get<Wagon[]>(`/wagons?trainId=${trainId}`),
+  assignToTrain: (wagonId: string, trainId: string, sequenceNumber?: number) =>
+    apiClient.post(`/wagons/${wagonId}/assign-train`, { trainId, sequenceNumber }),
+  unassign: (wagonId: string) => apiClient.post(`/wagons/${wagonId}/unassign-train`),
+  reorder: (trainId: string, wagonIds: string[]) =>
+    apiClient.post(`/trains/${trainId}/reorder-wagons`, { wagonIds }),
+    create: (data: Partial<Wagon>) => apiClient.post('/wagons', data),
+    update: (id: string, data: Partial<Wagon>) => apiClient.patch(`/wagons/${id}`, data),
+
+};