changes

2026-08-29 18:48:11 +00:00 · 2026-06-06 10:08:55 +03:00
parent 0794a77678 c8768ba70b
commit 3e3841cf6f
105 changed files with 6873 additions and 357 deletions
--- a/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/booking-ui.styles.ts
@@ -1,12 +1,10 @@
 /** Shared surfaces for booking list & detail — frosted glass, neutral accents. */

 export const bookingGlass = {
-  card:
-    "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
+  card: "border border-border/50 bg-card/75 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/60",
  panel:
    "border border-border/50 bg-card/80 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-card/65",
-  rail:
-    "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
+  rail: "border border-border/40 bg-muted/20 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/15",
  iconWell:
    "border border-border/50 bg-background/70 text-foreground/75 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-background/50",
  iconWellHero:
@@ -22,9 +20,8 @@ export const bookingGlass = {
 } as const;

 export const bookingSurface = {
-  page:
-    "min-h-screen bg-gradient-to-b from-muted/30 via-background to-background",
-  pageInner: "mx-auto max-w-[1600px] space-y-5 p-6 lg:p-8",
+  page: "min-h-screen bg-background ",
+  pageInner: "mx-auto max-w-[1600px] space-y-5 ",
  hero: `relative overflow-hidden rounded-2xl ${bookingGlass.card}`,
  heroGlow:
    "pointer-events-none absolute -right-24 -top-24 size-72 rounded-full bg-muted/40 blur-3xl",
--- a/apps/edr-freight-web/backoffice/src/components/cargoes/CargoFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/cargoes/CargoFormDialog.tsx
@@ -0,0 +1,238 @@
+import { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import axios from 'axios';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2 } from 'lucide-react';
+
+interface Cargo {
+  id: string;
+  cargoReference: string;
+  description: string;
+  quantity: number;
+  weight: number;
+  status: 'PENDING' | 'LOADED' | 'IN_TRANSIT' | 'DELIVERED' | 'CANCELLED';
+  remarks?: string;
+}
+
+interface CargoFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cargo?: Cargo | null;
+  onSuccess?: () => void;
+}
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
+
+export default function CargoFormDialog({
+  open,
+  onOpenChange,
+  cargo,
+  onSuccess,
+}: CargoFormDialogProps) {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState<Partial<Cargo>>({
+    cargoReference: '',
+    description: '',
+    quantity: 0,
+    weight: 0,
+    status: 'PENDING',
+    remarks: '',
+  });
+
+  useEffect(() => {
+    if (cargo) {
+      setFormData(cargo);
+    } else {
+      setFormData({
+        cargoReference: '',
+        description: '',
+        quantity: 0,
+        weight: 0,
+        status: 'PENDING',
+        remarks: '',
+      });
+    }
+  }, [cargo, open]);
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Cargo>) =>
+      axios.post(`${API_BASE_URL}/api/cargoes`, data),
+    onSuccess: () => {
+      toast.success('Cargo created successfully');
+      onOpenChange(false);
+      queryClient.invalidateQueries({ queryKey: ['cargoes'] });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = axios.isAxiosError(error)
+        ? error.response?.data?.message || 'Failed to create cargo'
+        : 'Failed to create cargo';
+      toast.error(message);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: Partial<Cargo>) =>
+      axios.patch(`${API_BASE_URL}/api/cargoes/${cargo?.id}`, data),
+    onSuccess: () => {
+      toast.success('Cargo updated successfully');
+      onOpenChange(false);
+      queryClient.invalidateQueries({ queryKey: ['cargoes'] });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = axios.isAxiosError(error)
+        ? error.response?.data?.message || 'Failed to update cargo'
+        : 'Failed to update cargo';
+      toast.error(message);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.cargoReference || !formData.description) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+    if (cargo?.id) {
+      updateMutation.mutate(formData);
+    } else {
+      createMutation.mutate(formData);
+    }
+  };
+
+  const isLoading = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {cargo ? 'Edit Cargo' : 'Create New Cargo'}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="cargoReference">Cargo Reference *</Label>
+              <Input
+                id="cargoReference"
+                value={formData.cargoReference || ''}
+                onChange={(e) =>
+                  setFormData({ ...formData, cargoReference: e.target.value })
+                }
+                placeholder="e.g., CRG001"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="status">Status</Label>
+              <select
+                id="status"
+                value={formData.status || 'PENDING'}
+                onChange={(e) =>
+                  setFormData({ ...formData, status: e.target.value as any })
+                }
+                className="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="PENDING">Pending</option>
+                <option value="LOADED">Loaded</option>
+                <option value="IN_TRANSIT">In Transit</option>
+                <option value="DELIVERED">Delivered</option>
+                <option value="CANCELLED">Cancelled</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description *</Label>
+            <Textarea
+              id="description"
+              value={formData.description || ''}
+              onChange={(e) =>
+                setFormData({ ...formData, description: e.target.value })
+              }
+              placeholder="Describe the cargo contents..."
+              rows={3}
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="quantity">Quantity *</Label>
+              <Input
+                id="quantity"
+                type="number"
+                value={formData.quantity || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    quantity: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="weight">Weight (kg) *</Label>
+              <Input
+                id="weight"
+                type="number"
+                value={formData.weight || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    weight: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+                required
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="remarks">Remarks</Label>
+            <Textarea
+              id="remarks"
+              value={formData.remarks || ''}
+              onChange={(e) =>
+                setFormData({ ...formData, remarks: e.target.value })
+              }
+              placeholder="Add any additional notes..."
+              rows={2}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {cargo ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </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
@@ -1,10 +1,16 @@
 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 { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@edr/ui-common';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useContainers, useAssignContainerToWagon } from '@/hooks/useContainers';
+import { useContainers, useAssignContainerToWagon } from './use-containers';
 import { useToast } from '@/hooks/use-toast';
 import { Plus } from 'lucide-react';

--- a/apps/edr-freight-web/backoffice/src/components/container_management/CargoFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/CargoFormDialog.tsx
@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@edr/ui-common';
+import { Textarea } from '@/components/ui/textarea';
+import { useCargoTypes } from './use-cargo-types';
+import { useCargoMutations } from './use-cargoes';
+import { Loader2 } from 'lucide-react';
+
+interface Cargo {
+  id: string;
+  cargoNumber: string;
+  cargoTypeId: string;
+  weight: number;
+  remarks?: string;
+}
+
+interface CargoFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  cargo?: Cargo | null;
+  onSuccess?: () => void;
+}
+
+export default function CargoFormDialog({
+  open,
+  onOpenChange,
+  cargo,
+  onSuccess,
+}: CargoFormDialogProps) {
+  const { data: cargoTypes } = useCargoTypes();
+  const { createCargo, updateCargo } = useCargoMutations();
+  const [formData, setFormData] = useState<Partial<Cargo>>({
+    cargoNumber: '',
+    cargoTypeId: '',
+    weight: 0,
+    remarks: '',
+  });
+
+  useEffect(() => {
+    if (cargo) {
+      setFormData(cargo);
+    } else {
+      setFormData({
+        cargoNumber: '',
+        cargoTypeId: '',
+        weight: 0,
+        remarks: '',
+      });
+    }
+  }, [cargo, open]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (cargo?.id) {
+      updateCargo.mutate(
+        { id: cargo.id, data: formData },
+        { onSuccess: () => { onOpenChange(false); onSuccess?.(); } }
+      );
+    } else {
+      createCargo.mutate(formData, {
+        onSuccess: () => { onOpenChange(false); onSuccess?.(); }
+      });
+    }
+  };
+
+  const isLoading = createCargo.isPending || updateCargo.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader><DialogTitle>{cargo ? 'Edit Cargo' : 'Create New Cargo'}</DialogTitle></DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label>Cargo Number *</Label>
+              <Input value={formData.cargoNumber} onChange={e => setFormData({...formData, cargoNumber: e.target.value})} required />
+            </div>
+            <div>
+              <Label>Cargo Type *</Label>
+              <Select 
+                value={formData.cargoTypeId || ''} 
+                onValueChange={(val) => setFormData({ ...formData, cargoTypeId: val })}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select cargo type..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {cargoTypes?.map((type: any) => (
+                    <SelectItem key={type.id} value={type.id}>{type.cargo_type_name || type.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div>
+            <Label>Weight (kg) *</Label>
+            <Input type="number" value={formData.weight} onChange={e => setFormData({...formData, weight: parseFloat(e.target.value)})} required />
+          </div>
+          <div>
+            <Label>Remarks</Label>
+            <Textarea value={formData.remarks} onChange={e => setFormData({...formData, remarks: e.target.value})} rows={3} />
+          </div>
+          <DialogFooter>
+            <Button type="submit" disabled={isLoading}>{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}{cargo ? 'Update' : 'Create'}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/ContainerFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/ContainerFormDialog.tsx
@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@edr/ui-common';
+import { Textarea } from '@/components/ui/textarea';
+import { useContainerTypes } from './use-container-types';
+import { useContainerMutations } from './use-containers';
+import { Loader2 } from 'lucide-react';
+
+interface Container {
+  id: string;
+  containerNumber: string;
+  containerTypeId: string;
+  wagonId?: string;
+  status: 'AVAILABLE' | 'IN_USE' | 'MAINTENANCE' | 'RETIRED';
+  capacity: number;
+  weight: number;
+  remarks?: string;
+}
+
+interface Wagon {
+  id: string;
+  wagonNumber: string;
+}
+
+interface ContainerFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  container?: Container | null;
+  wagons: Wagon[];
+  onSuccess?: () => void;
+}
+
+export default function ContainerFormDialog({
+  open,
+  onOpenChange,
+  container,
+  wagons = [],
+  onSuccess,
+}: ContainerFormDialogProps) {
+  const { data: containerTypes } = useContainerTypes();
+  const { createContainer, updateContainer } = useContainerMutations();
+  const [formData, setFormData] = useState<Partial<Container>>({
+    containerNumber: '',
+    containerTypeId: '',
+    status: 'AVAILABLE',
+    capacity: 0,
+    weight: 0,
+    remarks: '',
+  });
+
+  useEffect(() => {
+    if (container) {
+      setFormData(container);
+    } else {
+      setFormData({
+        containerNumber: '',
+        containerTypeId: '',
+        status: 'AVAILABLE',
+        capacity: 0,
+        weight: 0,
+        remarks: '',
+      });
+    }
+  }, [container, open]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.containerNumber || !formData.containerTypeId) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+    if (container?.id) {
+      updateContainer.mutate(
+        { id: container.id, data: formData },
+        { onSuccess: () => { onOpenChange(false); onSuccess?.(); } }
+      );
+    } else {
+      createContainer.mutate(formData, {
+        onSuccess: () => { onOpenChange(false); onSuccess?.(); }
+      });
+    }
+  };
+
+  const isLoading = createContainer.isPending || updateContainer.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {container ? 'Edit Container' : 'Create New Container'}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="containerNumber">Container Number *</Label>
+              <Input
+                id="containerNumber"
+                value={formData.containerNumber || ''}
+                onChange={(e) =>
+                  setFormData({ ...formData, containerNumber: e.target.value })
+                }
+                placeholder="e.g., CNT001"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="containerTypeId">Container Type *</Label>
+              <Select 
+                value={formData.containerTypeId || ''} 
+                onValueChange={(val:any) => setFormData({ ...formData, containerTypeId: val })}
+              >
+                <SelectTrigger id="containerTypeId">
+                  <SelectValue placeholder="Select container type..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {containerTypes?.map((type: any) => (
+                    <SelectItem key={type.id} value={type.id}>{type.name || type.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="wagonId">Wagon (Optional)</Label>
+              <Select
+                value={formData.wagonId || 'none'}
+                onValueChange={(val:any) => setFormData({ ...formData, wagonId: val === 'none' ? undefined : val })}
+              >
+                <SelectTrigger id="wagonId">
+                  <SelectValue placeholder="Select a wagon..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">None</SelectItem>
+                  {wagons.map((wagon) => (
+                    <SelectItem key={wagon.id} value={wagon.id}>
+                      {wagon.wagonNumber}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor="status">Status</Label>
+              <Select
+                value={formData.status || 'AVAILABLE'}
+                onValueChange={(val:any) => setFormData({ ...formData, status: val })}
+              >
+                <SelectTrigger id="status">
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="AVAILABLE">Available</SelectItem>
+                  <SelectItem value="IN_USE">In Use</SelectItem>
+                  <SelectItem value="MAINTENANCE">Maintenance</SelectItem>
+                  <SelectItem value="RETIRED">Retired</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="capacity">Capacity *</Label>
+              <Input
+                id="capacity"
+                type="number"
+                value={formData.capacity || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    capacity: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="weight">Weight (kg)</Label>
+              <Input
+                id="weight"
+                type="number"
+                value={formData.weight || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    weight: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="remarks">Remarks</Label>
+            <Textarea
+              id="remarks"
+              value={formData.remarks || ''}
+              onChange={(e) =>
+                setFormData({ ...formData, remarks: e.target.value })
+              }
+              placeholder="Add any additional notes..."
+              rows={3}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {container ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </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
@@ -1,7 +1,7 @@
-import { useContainersByWagon, useUnassignContainer } from '@/hooks/useContainers';
+import { useContainersByWagon, useUnassignContainer } from './use-containers';
 import { Button } from '@/components/ui/button';
 import { Trash2 } from 'lucide-react';
-import type { Container } from '@/services/containerService';
+import type { Container } from './container.service';

 export function ContainersTable({ wagonId }: { wagonId: string }) {
  const { data: containers, refetch } = useContainersByWagon(wagonId);
--- a/apps/edr-freight-web/backoffice/src/components/container_management/cargo-types.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/cargo-types.service.ts
@@ -0,0 +1,15 @@
+import { api } from '../../auth/http';
+
+type ListResponse<T> = T[] | { data: T[] };
+
+const asList = <T>(payload: ListResponse<T>): T[] =>
+  Array.isArray(payload) ? payload : payload.data;
+
+export const cargoTypesService = {
+  async getCargoTypes() {
+    const response = await api.get<ListResponse<unknown>>('/cargo-types', {
+      params: { isActive: true, pageSize: 500 },
+    });
+    return asList(response.data);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/container_management/cargo.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/cargo.service.ts
@@ -0,0 +1,19 @@
+import { api } from "../../auth/http";
+
+export const cargoService = {
+  async getCargoes() {
+    const response = await api.get('/cargoes');
+    return response.data;
+  },
+  async createCargo(data: any) {
+    const response = await api.post('/cargoes', data);
+    return response.data;
+  },
+  async updateCargo(id: string, data: any) {
+    const response = await api.patch(`/cargoes/${id}`, data);
+    return response.data;
+  },
+  async deleteCargo(id: string) {
+    await api.delete(`/cargoes/${id}`);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/container_management/container-types.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/container-types.service.ts
@@ -0,0 +1,15 @@
+import { api } from '../../auth/http';
+
+type ListResponse<T> = T[] | { data: T[] };
+
+const asList = <T>(payload: ListResponse<T>): T[] =>
+  Array.isArray(payload) ? payload : payload.data;
+
+export const containerTypesService = {
+  async getContainerTypes() {
+    const response = await api.get<ListResponse<unknown>>('/container-types', {
+      params: { isActive: true, pageSize: 500 },
+    });
+    return asList(response.data);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/container_management/container.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/container.service.ts
@@ -0,0 +1,31 @@
+import { api } from "../../auth/http";
+
+export const containerService = {
+  async getContainers() {
+    const response = await api.get('/containers');
+    return response.data;
+  },
+  async getContainersByWagon(wagonId: string) {
+    const response = await api.get('/containers', { params: { wagonId } });
+    return response.data;
+  },
+  async createContainer(data: any) {
+    const response = await api.post('/containers', data);
+    return response.data;
+  },
+  async updateContainer(id: string, data: any) {
+    const response = await api.patch(`/containers/${id}`, data);
+    return response.data;
+  },
+  async deleteContainer(id: string) {
+    await api.delete(`/containers/${id}`);
+  },
+  async assignToWagon(containerId: string, wagonId: string, position?: number) {
+    const response = await api.post(`/containers/${containerId}/assign-wagon`, { wagonId, position });
+    return response.data;
+  },
+  async unassignFromWagon(containerId: string) {
+    const response = await api.post(`/containers/${containerId}/unassign-wagon`);
+    return response.data;
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/container_management/containerTypesService.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/containerTypesService.ts
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-cargo-types.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-cargo-types.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { cargoTypesService } from './cargo-types.service';
+
+export const CARGO_TYPES_QUERY_KEY = ['cargo-types'];
+
+export function useCargoTypes() {
+  return useQuery({
+    queryKey: CARGO_TYPES_QUERY_KEY,
+    queryFn: () => cargoTypesService.getCargoTypes(),
+    staleTime: Infinity,
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-cargoes.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-cargoes.ts
@@ -0,0 +1,42 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { cargoService } from './cargo.service';
+import { toast } from 'sonner';
+
+export const CARGOES_QUERY_KEY = ['cargoes'];
+
+export function useCargoes() {
+  return useQuery({
+    queryKey: CARGOES_QUERY_KEY,
+    queryFn: () => cargoService.getCargoes(),
+  });
+}
+
+export function useCargoMutations() {
+  const queryClient = useQueryClient();
+
+  const createCargo = useMutation({
+    mutationFn: (data: any) => cargoService.createCargo(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CARGOES_QUERY_KEY });
+      toast.success('Cargo created successfully');
+    },
+  });
+
+  const updateCargo = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => cargoService.updateCargo(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CARGOES_QUERY_KEY });
+      toast.success('Cargo updated successfully');
+    },
+  });
+
+  const deleteCargo = useMutation({
+    mutationFn: (id: string) => cargoService.deleteCargo(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CARGOES_QUERY_KEY });
+      toast.success('Cargo deleted successfully');
+    },
+  });
+
+  return { createCargo, updateCargo, deleteCargo };
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-container-types.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-container-types.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { containerTypesService } from './container-types.service';
+
+export const CONTAINER_TYPES_QUERY_KEY = ['container-types'];
+
+export function useContainerTypes() {
+  return useQuery({
+    queryKey: CONTAINER_TYPES_QUERY_KEY,
+    queryFn: () => containerTypesService.getContainerTypes(),
+    staleTime: Infinity,
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-containers.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-containers.ts
@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { containerService } from './container.service';
+import { toast } from 'sonner';
+
+export const CONTAINERS_QUERY_KEY = ['containers'];
+
+export function useContainers() {
+  return useQuery({
+    queryKey: CONTAINERS_QUERY_KEY,
+    queryFn: () => containerService.getContainers(),
+  });
+}
+
+export function useContainersByWagon(wagonId: string) {
+  return useQuery({
+    queryKey: [...CONTAINERS_QUERY_KEY, 'wagon', wagonId],
+    queryFn: () => containerService.getContainersByWagon(wagonId),
+    enabled: !!wagonId,
+  });
+}
+
+export function useContainerMutations() {
+  const queryClient = useQueryClient();
+
+  const createContainer = useMutation({
+    mutationFn: (data: any) => containerService.createContainer(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CONTAINERS_QUERY_KEY });
+      toast.success('Container created successfully');
+    },
+  });
+
+  const updateContainer = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => containerService.updateContainer(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CONTAINERS_QUERY_KEY });
+      toast.success('Container updated successfully');
+    },
+  });
+
+  const deleteContainer = useMutation({
+    mutationFn: (id: string) => containerService.deleteContainer(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CONTAINERS_QUERY_KEY });
+      toast.success('Container deleted successfully');
+    },
+  });
+
+  return { createContainer, updateContainer, deleteContainer };
+}
+
+export function useUnassignContainer() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => containerService.unassignFromWagon(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CONTAINERS_QUERY_KEY });
+      toast.success('Container unassigned from wagon');
+    },
+  });
+}
+
+export function useAssignContainerToWagon() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ containerId, wagonId, position }: { containerId: string; wagonId: string; position?: number }) =>
+      containerService.assignToWagon(containerId, wagonId, position),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: CONTAINERS_QUERY_KEY });
+      toast.success('Container assigned to wagon');
+    },
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-wagon-types.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-wagon-types.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { wagonTypesService } from './wagon-types.service';
+
+export const WAGON_TYPES_QUERY_KEY = ['wagon-types'];
+
+export function useWagonTypes() {
+  return useQuery({
+    queryKey: WAGON_TYPES_QUERY_KEY,
+    queryFn: () => wagonTypesService.getWagonTypes(),
+    staleTime: Infinity,
+  });
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/use-wagons.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/use-wagons.ts
@@ -0,0 +1,48 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { wagonService } from './wagon.service';
+import { toast } from 'sonner';
+
+export const WAGONS_QUERY_KEY = ['wagons'];
+
+export function useWagons() {
+  return useQuery({
+    queryKey: WAGONS_QUERY_KEY,
+    queryFn: () => wagonService.getWagons(),
+  });
+}
+
+export function useWagonMutations() {
+  const queryClient = useQueryClient();
+
+  const createWagon = useMutation({
+    mutationFn: (data: any) => wagonService.createWagon(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: WAGONS_QUERY_KEY });
+      toast.success('Wagon created successfully');
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.message || 'Failed to create wagon');
+    },
+  });
+
+  const updateWagon = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => wagonService.updateWagon(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: WAGONS_QUERY_KEY });
+      toast.success('Wagon updated successfully');
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.message || 'Failed to update wagon');
+    },
+  });
+
+  const deleteWagon = useMutation({
+    mutationFn: (id: string) => wagonService.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: WAGONS_QUERY_KEY });
+      toast.success('Wagon deleted successfully');
+    },
+  });
+
+  return { createWagon, updateWagon, deleteWagon };
+}
--- a/apps/edr-freight-web/backoffice/src/components/container_management/useCargoTypes.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/useCargoTypes.ts
--- a/apps/edr-freight-web/backoffice/src/components/container_management/useCargoes.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/useCargoes.ts
--- a/apps/edr-freight-web/backoffice/src/components/container_management/useContainerTypes.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/useContainerTypes.ts
--- a/apps/edr-freight-web/backoffice/src/components/container_management/wagon-types.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/wagon-types.service.ts
@@ -0,0 +1,13 @@
+import { api } from '../../auth/http';
+
+type ListResponse<T> = T[] | { data: T[] };
+
+const asList = <T>(payload: ListResponse<T>): T[] =>
+  Array.isArray(payload) ? payload : payload.data;
+
+export const wagonTypesService = {
+  async getWagonTypes() {
+    const response = await api.get<ListResponse<unknown>>('/wagon-types');
+    return asList(response.data);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/container_management/wagon.service.ts
+++ b/apps/edr-freight-web/backoffice/src/components/container_management/wagon.service.ts
@@ -0,0 +1,23 @@
+import { api } from "../../auth/http";
+
+export const wagonService = {
+  async getWagons() {
+    const response = await api.get('/wagons');
+    return response.data;
+  },
+  async getWagonById(id: string) {
+    const response = await api.get(`/wagons/${id}`);
+    return response.data;
+  },
+  async createWagon(data: any) {
+    const response = await api.post('/wagons', data);
+    return response.data;
+  },
+  async updateWagon(id: string, data: any) {
+    const response = await api.patch(`/wagons/${id}`, data);
+    return response.data;
+  },
+  async deleteWagon(id: string) {
+    await api.delete(`/wagons/${id}`);
+  },
+};
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
@@ -56,7 +56,10 @@ const FreightDashboardHeader = ({
    if (!isUserMenuOpen) return;

    const handlePointerDown = (event: MouseEvent) => {
-      if (userMenuRef.current && !userMenuRef.current.contains(event.target as Node)) {
+      if (
+        userMenuRef.current &&
+        !userMenuRef.current.contains(event.target as Node)
+      ) {
        setIsUserMenuOpen(false);
      }
    };
@@ -74,10 +77,14 @@ const FreightDashboardHeader = ({
  }, [isUserMenuOpen]);

  return (
-    <header className="flex h-[82px] shrink-0 items-center justify-between gap-4 px-6">
+    <header className="flex h-20 shrink-0 items-center justify-between gap-4 px-6">
      <div className="min-w-0">
-        <h1 className="truncate text-xl font-bold tracking-tight text-gray-900">{pageMeta.title}</h1>
-        <p className="mt-0.5 truncate text-sm text-gray-500">{pageMeta.subtitle}</p>
+        <h1 className="truncate text-xl font-bold tracking-tight text-foreground">
+          {pageMeta.title}
+        </h1>
+        <p className="mt-0.5 truncate text-sm text-secondary-foreground">
+          {pageMeta.subtitle}
+        </p>
      </div>

      <div className="flex shrink-0 items-center gap-2">
@@ -85,14 +92,24 @@ const FreightDashboardHeader = ({
          <button
            type="button"
            onClick={onToggleTheme}
-            aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            aria-label={
+              theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+            }
            className={iconButtonClass}
          >
-            {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            {theme === "dark" ? (
+              <Sun className="h-5 w-5" />
+            ) : (
+              <Moon className="h-5 w-5" />
+            )}
          </button>
        ) : null}

-        <button type="button" aria-label="Change language" className={iconButtonClass}>
+        <button
+          type="button"
+          aria-label="Change language"
+          className={iconButtonClass}
+        >
          <Languages className="h-5 w-5" />
        </button>

@@ -101,7 +118,11 @@ const FreightDashboardHeader = ({
          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
        </button>

-        <button type="button" aria-label="Notifications" className={iconButtonClass}>
+        <button
+          type="button"
+          aria-label="Notifications"
+          className={iconButtonClass}
+        >
          <Bell className="h-5 w-5" />
          <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-red-500 ring-2 ring-white" />
        </button>
@@ -136,8 +157,12 @@ const FreightDashboardHeader = ({
              className="absolute right-0 top-full z-50 mt-2 w-52 overflow-hidden rounded-xl border border-gray-200 bg-white py-1 shadow-lg"
            >
              <div className="border-b border-gray-100 px-4 py-3">
-                <p className="text-sm font-semibold text-gray-900">{userName}</p>
-                {userEmail ? <p className="text-xs text-gray-500">{userEmail}</p> : null}
+                <p className="text-sm font-semibold text-gray-900">
+                  {userName}
+                </p>
+                {userEmail ? (
+                  <p className="text-xs text-gray-500">{userEmail}</p>
+                ) : null}
              </div>
              <a
                href="#profile"
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx
@@ -12,7 +12,9 @@ function getInitialTheme(): Theme {
  if (typeof window === "undefined") return "light";
  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
  if (stored === "dark" || stored === "light") return stored;
-  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
 }

 export interface FreightDashboardLayoutProps {
@@ -29,7 +31,7 @@ export interface FreightDashboardLayoutProps {
 }

 const panelClass =
-  "rounded-2xl border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.06)]";
+  "rounded-lg border border-gray-200/80 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.06)]";

 const FreightDashboardLayout = ({
  sidebarSections,
@@ -59,7 +61,8 @@ const FreightDashboardLayout = ({
    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
  }, [theme, enableThemeToggle]);

-  const toggleTheme = () => setTheme((current) => (current === "dark" ? "light" : "dark"));
+  const toggleTheme = () =>
+    setTheme((current) => (current === "dark" ? "light" : "dark"));

  return (
    <>
@@ -71,17 +74,17 @@ const FreightDashboardLayout = ({
      />

      <div
-        className="flex h-[100dvh] overflow-hidden bg-[#eceef2] p-3 antialiased md:p-4"
+        className="flex h-[100dvh] overflow-hidden bg-[#eceef2] p-2 antialiased"
        style={{ fontFamily: "'Outfit', var(--font-sans)" }}
      >
-        <div className="flex h-full min-h-0 w-full gap-3 md:gap-3">
+        <div className="flex h-full min-h-0 w-full gap-2">
          <FreightSidebar
            sections={sidebarSections}
            activeHref={activeHref}
            onNavigate={onNavigate}
          />

-          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col gap-3 md:gap-3">
+          <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col gap-2">
            <div className={`shrink-0 ${panelClass}`}>
              <FreightDashboardHeader
                pageMeta={pageMeta}
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightSidebar.tsx
@@ -1,4 +1,10 @@
-import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";

 import { cn } from "@/lib/utils";
@@ -20,21 +26,28 @@ const collectSidebarHrefs = (items: SidebarItem[]): string[] =>
  items.flatMap((item) => {
    const hrefs: string[] = [];
    if (item.href) hrefs.push(item.href.toLowerCase());
-    if (item.children?.length) hrefs.push(...collectSidebarHrefs(item.children));
+    if (item.children?.length)
+      hrefs.push(...collectSidebarHrefs(item.children));
    return hrefs;
  });

 const flattenSectionItems = (sections: SidebarSection[]) =>
  sections.flatMap((section) => section.items);

-const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProps) => {
+const FreightSidebar = ({
+  sections,
+  activeHref,
+  onNavigate,
+}: FreightSidebarProps) => {
  const items = useMemo(() => flattenSectionItems(sections), [sections]);
  const activePath = activeHref?.toLowerCase() ?? "";

  const isHrefActive = useCallback(
    (href: string) => {
      const normalized = href.toLowerCase();
-      return activePath === normalized || activePath.startsWith(`${normalized}/`);
+      return (
+        activePath === normalized || activePath.startsWith(`${normalized}/`)
+      );
    },
    [activePath],
  );
@@ -72,7 +85,8 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
    return acc;
  }, [activePath, branchContainsActive, isHrefActive, items]);

-  const [expanded, setExpanded] = useState<Record<string, boolean>>(defaultExpanded);
+  const [expanded, setExpanded] =
+    useState<Record<string, boolean>>(defaultExpanded);

  useEffect(() => {
    setExpanded((current) => ({ ...defaultExpanded, ...current }));
@@ -108,7 +122,11 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
          : "text-gray-900",
    );

-  const renderNavBranch = (children: SidebarItem[], depth: number, parentKey: string) =>
+  const renderNavBranch = (
+    children: SidebarItem[],
+    depth: number,
+    parentKey: string,
+  ) =>
    children.map((child) => {
      const key = sidebarItemKey(child, parentKey);
      const isGroup = Boolean(child.children?.length) && !child.href;
@@ -181,7 +199,9 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp

    const hasChildren = Boolean(item.children?.length);
    const itemHref = item.href.toLowerCase();
-    const childActive = hasChildren ? branchContainsActive(item.children!) : false;
+    const childActive = hasChildren
+      ? branchContainsActive(item.children!)
+      : false;
    const isCurrentItem = hasChildren
      ? activePath === itemHref
      : isHrefActive(itemHref);
@@ -206,10 +226,12 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
            href={item.href}
            onClick={(event) => navigateTo(event, item.href!)}
            aria-current={isCurrentItem ? "page" : undefined}
-            className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-base font-medium leading-snug"
+            className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-sm leading-snug"
          >
            {item.icon ? (
-              <span className={iconClass(leafActive, isActive)}>{item.icon}</span>
+              <span className={iconClass(leafActive, isActive)}>
+                {item.icon}
+              </span>
            ) : null}
            <span className="truncate">{item.label}</span>
          </a>
@@ -257,10 +279,12 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
  };

  return (
-    <aside className="flex h-full max-h-full w-[340px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+    <aside className="flex h-full max-h-full w-[280px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
      <div className="flex shrink-0 items-center gap-2.5 border-b border-gray-100 px-5 py-5">
        <img src={EDR_LOGO} alt="EDR Freight" className="h-9 w-auto" />
-        <span className="text-lg font-semibold tracking-tight text-gray-900">EDR Freight</span>
+        <span className="text-lg font-semibold tracking-tight text-gray-900">
+          EDR Freight
+        </span>
      </div>

      <nav className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto overscroll-contain px-3 py-4">
@@ -270,7 +294,7 @@ const FreightSidebar = ({ sections, activeHref, onNavigate }: FreightSidebarProp
              className={cn(
                "px-3 pb-1 text-xs font-semibold uppercase tracking-wide",
                // Use a very light gray for ALL section titles, not just when mutedTitle is specified
-                "text-gray-400"
+                "text-sidebar-secondary-foreground",
              )}
            >
              {section.title}
--- a/apps/edr-freight-web/backoffice/src/components/ui/card.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/ui/card.tsx
@@ -0,0 +1 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardFooter, CardAction, CardContent } from '@edr/ui-common';
--- a/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialog.tsx
@@ -4,6 +4,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@edr/ui-common';
+import { useWagonTypes } from '@/hooks/use-wagon-types';
 import { useCreateWagon, useUpdateWagon } from '@/hooks/useWagons';
 import { useToast } from '@/hooks/use-toast';

@@ -25,6 +27,7 @@ export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogPr
  });
  const createWagon = useCreateWagon();
  const updateWagon = useUpdateWagon();
+  const { data: wagonTypes = [], isLoading: wagonTypesLoading } = useWagonTypes();
  const { toast } = useToast();

  useEffect(() => {
@@ -40,6 +43,10 @@ export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogPr

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
+    if (!form.wagonNumber || !form.wagonTypeId) {
+      toast({ title: 'Missing required field', description: 'Please select a wagon type.', variant: 'destructive' });
+      return;
+    }
    try {
      if (wagon) await updateWagon.mutateAsync({ id: wagon.id, data: form });
      else await createWagon.mutateAsync(form);
@@ -57,10 +64,37 @@ export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogPr
      <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>Wagon Number*</Label><Input value={form.wagonNumber} onChange={e => setForm({...form, wagonNumber: e.target.value})} /></div>
+          <div>
+            <Label>Wagon Type*</Label>
+            <Select
+              value={form.wagonTypeId}
+              disabled={wagonTypesLoading}
+              onValueChange={(value) => {
+                const selectedType = wagonTypes.find((type: any) => type.id === value);
+                setForm((current) => ({
+                  ...current,
+                  wagonTypeId: value,
+                  maxPayloadWeight: current.maxPayloadWeight > 0
+                    ? current.maxPayloadWeight
+                    : Number(selectedType?.capacityTons ?? current.maxPayloadWeight),
+                }));
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select wagon type" />
+              </SelectTrigger>
+              <SelectContent>
+                {wagonTypes.map((type: any) => (
+                  <SelectItem key={type.id} value={type.id}>
+                    {type.code} - {type.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div><Label>Tare Weight (kg)*</Label><Input type="number" value={form.tareWeight} onChange={e => setForm({...form, tareWeight: Number(e.target.value)})} /></div>
+          <div><Label>Max Payload (kg)*</Label><Input type="number" value={form.maxPayloadWeight} onChange={e => setForm({...form, maxPayloadWeight: Number(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>
@@ -68,4 +102,4 @@ export function WagonFormDialog({ trigger, wagon, onSuccess }: WagonFormDialogPr
      </DialogContent>
    </Dialog>
  );
-}
+}
--- a/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialogEnhanced.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonFormDialogEnhanced.tsx
@@ -0,0 +1,282 @@
+import { useState, useEffect } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import axios from 'axios';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@edr/ui-common';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2 } from 'lucide-react';
+import { useWagonTypes } from '@/hooks/use-wagon-types';
+
+interface Wagon {
+  id: string;
+  wagonNumber: string;
+  wagonTypeId: string;
+  trainId?: string;
+  status: 'AVAILABLE' | 'IN_USE' | 'MAINTENANCE' | 'RETIRED';
+  capacity: number;
+  emptyWeight: number;
+  remarks?: string;
+}
+
+interface Train {
+  id: string;
+  trainNumber: string;
+}
+
+interface WagonFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  wagon?: Wagon | null;
+  trains: Train[];
+  onSuccess?: () => void;
+}
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
+
+export default function WagonFormDialog({
+  open,
+  onOpenChange,
+  wagon,
+  trains = [],
+  onSuccess,
+}: WagonFormDialogProps) {
+  const queryClient = useQueryClient();
+  const { data: wagonTypes = [], isLoading: wagonTypesLoading } = useWagonTypes();
+  const [formData, setFormData] = useState<Partial<Wagon>>({
+    wagonNumber: '',
+    wagonTypeId: '',
+    status: 'AVAILABLE',
+    capacity: 0,
+    emptyWeight: 0,
+    remarks: '',
+  });
+
+  useEffect(() => {
+    if (wagon) {
+      setFormData(wagon);
+    } else {
+      setFormData({
+        wagonNumber: '',
+        wagonTypeId: '',
+        status: 'AVAILABLE',
+        capacity: 0,
+        emptyWeight: 0,
+        remarks: '',
+      });
+    }
+  }, [wagon, open]);
+
+  const createMutation = useMutation({
+    mutationFn: (data: Partial<Wagon>) =>
+      axios.post(`${API_BASE_URL}/api/wagons`, data),
+    onSuccess: () => {
+      toast.success('Wagon created successfully');
+      onOpenChange(false);
+      queryClient.invalidateQueries({ queryKey: ['wagons'] });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = axios.isAxiosError(error)
+        ? error.response?.data?.message || 'Failed to create wagon'
+        : 'Failed to create wagon';
+      toast.error(message);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: Partial<Wagon>) =>
+      axios.patch(`${API_BASE_URL}/api/wagons/${wagon?.id}`, data),
+    onSuccess: () => {
+      toast.success('Wagon updated successfully');
+      onOpenChange(false);
+      queryClient.invalidateQueries({ queryKey: ['wagons'] });
+      onSuccess?.();
+    },
+    onError: (error) => {
+      const message = axios.isAxiosError(error)
+        ? error.response?.data?.message || 'Failed to update wagon'
+        : 'Failed to update wagon';
+      toast.error(message);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.wagonNumber || !formData.wagonTypeId) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+    if (wagon?.id) {
+      updateMutation.mutate(formData);
+    } else {
+      createMutation.mutate(formData);
+    }
+  };
+
+  const isLoading = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {wagon ? 'Edit Wagon' : 'Create New Wagon'}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="wagonNumber">Wagon Number *</Label>
+              <Input
+                id="wagonNumber"
+                value={formData.wagonNumber || ''}
+                onChange={(e) =>
+                  setFormData({ ...formData, wagonNumber: e.target.value })
+                }
+                placeholder="e.g., W001"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="wagonTypeId">Type *</Label>
+              <Select
+                value={formData.wagonTypeId || ''}
+                disabled={wagonTypesLoading}
+                onValueChange={(value) => {
+                  const selectedType = wagonTypes.find((type: any) => type.id === value);
+                  setFormData({
+                    ...formData,
+                    wagonTypeId: value,
+                    capacity: formData.capacity && formData.capacity > 0
+                      ? formData.capacity
+                      : Number(selectedType?.capacityTons ?? 0),
+                  });
+                }}
+              >
+                <SelectTrigger id="wagonTypeId">
+                  <SelectValue placeholder="Select wagon type" />
+                </SelectTrigger>
+                <SelectContent>
+                  {wagonTypes.map((type: any) => (
+                    <SelectItem key={type.id} value={type.id}>
+                      {type.code} - {type.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="trainId">Train (Optional)</Label>
+              <select
+                id="trainId"
+                value={formData.trainId || ''}
+                onChange={(e) =>
+                  setFormData({ ...formData, trainId: e.target.value || undefined })
+                }
+                className="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="">Select a train...</option>
+                {trains.map(train => (
+                  <option key={train.id} value={train.id}>
+                    {train.trainNumber}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <Label htmlFor="status">Status</Label>
+              <select
+                id="status"
+                value={formData.status || 'AVAILABLE'}
+                onChange={(e) =>
+                  setFormData({ ...formData, status: e.target.value as any })
+                }
+                className="flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              >
+                <option value="AVAILABLE">Available</option>
+                <option value="IN_USE">In Use</option>
+                <option value="MAINTENANCE">Maintenance</option>
+                <option value="RETIRED">Retired</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="capacity">Capacity *</Label>
+              <Input
+                id="capacity"
+                type="number"
+                value={formData.capacity || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    capacity: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="emptyWeight">Empty Weight (kg)</Label>
+              <Input
+                id="emptyWeight"
+                type="number"
+                value={formData.emptyWeight || ''}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    emptyWeight: parseFloat(e.target.value) || 0,
+                  })
+                }
+                placeholder="0"
+              />
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="remarks">Remarks</Label>
+            <Textarea
+              id="remarks"
+              value={formData.remarks || ''}
+              onChange={(e) =>
+                setFormData({ ...formData, remarks: e.target.value })
+              }
+              placeholder="Add any additional notes..."
+              rows={3}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {wagon ? 'Update' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </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
@@ -1,7 +1,7 @@
 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 { 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 }) {
				`@@ -0,0 +1 @@`
				`export { Card, CardHeader, CardTitle, CardDescription, CardFooter, CardAction, CardContent } from '@edr/ui-common';`