diff --git a/frontend-admin/src/screens/admin/OrderDetailScreen.tsx b/frontend-admin/src/screens/admin/OrderDetailScreen.tsx
index 5a01986b..8f2f15ea 100644
--- a/frontend-admin/src/screens/admin/OrderDetailScreen.tsx
+++ b/frontend-admin/src/screens/admin/OrderDetailScreen.tsx
@@ -6,7 +6,6 @@ import {
     ScrollView,
     TouchableOpacity,
     Modal,
-    StatusBar,
     Alert,
     useWindowDimensions,
 } from "react-native";
@@ -16,7 +15,7 @@ import {
     type RouteProp,
 } from "@react-navigation/native";
 import { Ionicons } from "@expo/vector-icons";
-import MapView, { Marker, Polyline, PROVIDER_DEFAULT } from "react-native-maps";
+import TomTomMap, { type TomTomMapRef, type TomTomMarker } from "../../components/TomTomMap";
 import { spacing, fontSize, borderRadius } from "../../theme";
 import { useTheme } from "../../context/ThemeContext";
 import {
@@ -30,7 +29,7 @@ import {
     deleteCommandItem,
     deleteCommand,
 } from "../../api/api_admin";
-import { geocodeAddress, calculateRoute } from "../../api/tomtom";
+import { calculateRoute, geocodeAddress } from "../../api/tomtom";
 import type { RouteInfo, LatLng } from "../../api/tomtom";
 import type { AdminStackParamList } from "../../navigation/types";
 import StatusBadge from "../../components/StatusBadge";
@@ -55,11 +54,12 @@ export default function OrderDetailScreen() {
     const [showItemsModal, setShowItemsModal] = useState(false);
 
     // Map / tracking
-    const mapRef = useRef<MapView | null>(null);
-    const fullscreenMapRef = useRef<MapView | null>(null);
+    const mapRef = useRef<TomTomMapRef | null>(null);
+    const fullscreenMapRef = useRef<TomTomMapRef | null>(null);
     const [mapFullscreen, setMapFullscreen] = useState(false);
     const [livreurCoords, setLivreurCoords] = useState<LatLng | null>(null);
     const [destCoords, setDestCoords] = useState<LatLng | null>(null);
+    const [livreurMarkers, setLivreurMarkers] = useState<TomTomMarker[]>([]);
     const [routeInfo, setRouteInfo] = useState<RouteInfo | null>(null);
     const [mapLoading, setMapLoading] = useState(false);
     const { alert, showError, showSuccess, hideAlert } = useAlert();
@@ -99,13 +99,21 @@ export default function OrderDetailScreen() {
         return () => clearInterval(interval);
     }, [orderId]);
 
+    // Rejoue la route sur la carte fullscreen quand elle s'ouvre
+    useEffect(() => {
+        if (mapFullscreen && livreurCoords && destCoords) {
+            setTimeout(() => {
+                fullscreenMapRef.current?.calcRoute(livreurCoords, destCoords);
+            }, 600);
+        }
+    }, [mapFullscreen]);
+
     const loadLivreurRoute = async (
         livreurUsername: string,
         deliveryAddress: string,
     ) => {
         setMapLoading(true);
         try {
-            // Get livreur location
             const details = await getDeliveryPersonDetails(livreurUsername);
             const loc = details?.location;
             if (!loc?.latitude || !loc?.longitude) {
@@ -113,24 +121,26 @@ export default function OrderDetailScreen() {
                 return;
             }
 
-            const origin: LatLng = {
+            const origin: LatLng = { latitude: loc.latitude, longitude: loc.longitude };
+            setLivreurCoords(origin);
+            setLivreurMarkers([{
+                id: livreurUsername,
                 latitude: loc.latitude,
                 longitude: loc.longitude,
-            };
-            setLivreurCoords(origin);
+                color: "#22c55e",
+                label: livreurUsername,
+                description: "Livreur",
+            }]);
 
-            // Geocode destination
+            // Dessine la route sur la carte et récupère les infos (distance/durée)
             const dest = await geocodeAddress(deliveryAddress);
-            if (!dest) {
-                setMapLoading(false);
-                return;
-            }
-            setDestCoords(dest);
-
-            // Calculate route
-            const result = await calculateRoute(origin, dest);
-            if (result) {
-                setRouteInfo(result.route);
+            if (dest) {
+                setDestCoords(dest);
+                const result = await calculateRoute(origin, dest);
+                if (result) {
+                    setRouteInfo(result.route);
+                    mapRef.current?.calcRoute(origin, dest);
+                }
             }
         } catch {
             /* silent */
@@ -138,27 +148,6 @@ export default function OrderDetailScreen() {
         setMapLoading(false);
     };
 
-    const fitMapToRoute = (ref: React.RefObject<MapView | null>) => {
-        if (ref.current && livreurCoords && destCoords) {
-            ref.current.fitToCoordinates(
-                [
-                    {
-                        latitude: livreurCoords.latitude,
-                        longitude: livreurCoords.longitude,
-                    },
-                    {
-                        latitude: destCoords.latitude,
-                        longitude: destCoords.longitude,
-                    },
-                ],
-                {
-                    edgePadding: { top: 80, right: 60, bottom: 80, left: 60 },
-                    animated: true,
-                },
-            );
-        }
-    };
-
     const handleValidate = async () => {
         try {
             await validateCommand(orderId);
@@ -316,39 +305,6 @@ export default function OrderDetailScreen() {
                 },
                 map: { width: "100%", height: MAP_HEIGHT },
 
-                driverMarkerOuter: {
-                    width: 34,
-                    height: 34,
-                    borderRadius: 17,
-                    backgroundColor: colors.success + "40",
-                    justifyContent: "center",
-                    alignItems: "center",
-                },
-                driverMarkerInner: {
-                    width: 26,
-                    height: 26,
-                    borderRadius: 13,
-                    backgroundColor: colors.success,
-                    justifyContent: "center",
-                    alignItems: "center",
-                },
-                destMarkerOuter: {
-                    width: 30,
-                    height: 30,
-                    borderRadius: 15,
-                    backgroundColor: colors.danger + "40",
-                    justifyContent: "center",
-                    alignItems: "center",
-                },
-                destMarkerInner: {
-                    width: 22,
-                    height: 22,
-                    borderRadius: 11,
-                    backgroundColor: colors.danger,
-                    justifyContent: "center",
-                    alignItems: "center",
-                },
-
                 routeOverlay: {
                     position: "absolute",
                     top: spacing.s,
@@ -552,16 +508,21 @@ export default function OrderDetailScreen() {
     );
 
     // Groupement des items par product_id
-    const productGroups = (items ?? []).reduce<Record<string, any[]>>((acc, item) => {
-        const key = String(item.product_id || item.produit);
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(item);
-        return acc;
-    }, {});
+    const productGroups = (items ?? []).reduce<Record<string, any[]>>(
+        (acc, item) => {
+            const key = String(item.product_id || item.produit);
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(item);
+            return acc;
+        },
+        {},
+    );
     const groupedList = Object.values(productGroups);
 
     // Récapitulatif par catégorie
-    const categoryTotals = (items ?? []).reduce<Record<string, { qty: number; total: number }>>((acc, item) => {
+    const categoryTotals = (items ?? []).reduce<
+        Record<string, { qty: number; total: number }>
+    >((acc, item) => {
         const cat = item.category || "Autre";
         if (!acc[cat]) acc[cat] = { qty: 0, total: 0 };
         acc[cat].qty += item.quantite ?? 0;
@@ -590,74 +551,21 @@ export default function OrderDetailScreen() {
                 visible={mapFullscreen}
                 animationType="fade"
                 onRequestClose={() => setMapFullscreen(false)}
-                statusBarTranslucent
             >
-                <StatusBar hidden={mapFullscreen} />
                 <View style={styles.fullscreenContainer}>
-                    {livreurCoords && (
-                        <MapView
-                            ref={fullscreenMapRef}
-                            provider={PROVIDER_DEFAULT}
-                            style={styles.fullscreenMap}
-                            initialRegion={{
-                                latitude: livreurCoords.latitude,
-                                longitude: livreurCoords.longitude,
-                                latitudeDelta: 0.02,
-                                longitudeDelta: 0.02,
-                            }}
-                            onMapReady={() => fitMapToRoute(fullscreenMapRef)}
-                            showsCompass
-                            showsScale
-                        >
-                            <Marker
-                                coordinate={livreurCoords}
-                                title={command.livreur_assign}
-                            >
-                                <View style={styles.driverMarkerOuter}>
-                                    <View style={styles.driverMarkerInner}>
-                                        <Ionicons
-                                            name="bicycle"
-                                            size={14}
-                                            color={colors.white}
-                                        />
-                                    </View>
-                                </View>
-                            </Marker>
-                            {destCoords && (
-                                <Marker
-                                    coordinate={destCoords}
-                                    title="Destination"
-                                >
-                                    <View style={styles.destMarkerOuter}>
-                                        <View style={styles.destMarkerInner}>
-                                            <Ionicons
-                                                name="flag"
-                                                size={12}
-                                                color={colors.white}
-                                            />
-                                        </View>
-                                    </View>
-                                </Marker>
-                            )}
-                            {routeInfo && routeInfo.coordinates.length > 0 && (
-                                <Polyline
-                                    coordinates={routeInfo.coordinates}
-                                    strokeColor="#4285F4"
-                                    strokeWidth={5}
-                                />
-                            )}
-                        </MapView>
-                    )}
+                    <TomTomMap
+                        ref={fullscreenMapRef}
+                        style={styles.fullscreenMap}
+                        markers={livreurMarkers}
+                        initialCenter={livreurCoords ?? undefined}
+                        initialZoom={14}
+                    />
                     <View style={styles.fullscreenTopBar}>
                         <TouchableOpacity
                             style={styles.closeBtn}
                             onPress={() => setMapFullscreen(false)}
                         >
-                            <Ionicons
-                                name="close"
-                                size={24}
-                                color={colors.white}
-                            />
+                            <Ionicons name="close" size={24} color={colors.white} />
                         </TouchableOpacity>
                         <Text style={styles.fullscreenTitle}>
                             {routeInfo
@@ -683,10 +591,23 @@ export default function OrderDetailScreen() {
                 {command.referral_used > 0 && (
                     <>
                         <Text style={[styles.info, { color: colors.success }]}>
-                            Parrainage utilisé: -{command.referral_used?.toFixed(2)} €
+                            Parrainage utilisé: -
+                            {command.referral_used?.toFixed(2)} €
                         </Text>
-                        <Text style={[styles.info, { fontWeight: "700", color: colors.textPrimary }]}>
-                            Net: {(command.total_prix - command.referral_used).toFixed(2)} €
+                        <Text
+                            style={[
+                                styles.info,
+                                {
+                                    fontWeight: "700",
+                                    color: colors.textPrimary,
+                                },
+                            ]}
+                        >
+                            Net:{" "}
+                            {(
+                                command.total_prix - command.referral_used
+                            ).toFixed(2)}{" "}
+                            €
                         </Text>
                     </>
                 )}
@@ -699,29 +620,53 @@ export default function OrderDetailScreen() {
                     {new Date(command.created_at).toLocaleString("fr-FR")}
                 </Text>
                 {command.status === "cancelled" && command.cancel_reason ? (
-                    <View style={{
-                        marginTop: spacing.m,
-                        padding: spacing.m,
-                        backgroundColor: colors.danger + "18",
-                        borderRadius: borderRadius.sm,
-                        borderLeftWidth: 3,
-                        borderLeftColor: colors.danger,
-                    }}>
-                        <Text style={{ color: colors.danger, fontSize: fontSize.xs, fontWeight: "700", marginBottom: 4, textTransform: "uppercase", letterSpacing: 0.5 }}>
+                    <View
+                        style={{
+                            marginTop: spacing.m,
+                            padding: spacing.m,
+                            backgroundColor: colors.danger + "18",
+                            borderRadius: borderRadius.sm,
+                            borderLeftWidth: 3,
+                            borderLeftColor: colors.danger,
+                        }}
+                    >
+                        <Text
+                            style={{
+                                color: colors.danger,
+                                fontSize: fontSize.xs,
+                                fontWeight: "700",
+                                marginBottom: 4,
+                                textTransform: "uppercase",
+                                letterSpacing: 0.5,
+                            }}
+                        >
                             Motif d'annulation
                         </Text>
-                        <Text style={{ color: colors.textSecondary, fontSize: fontSize.sm }}>
+                        <Text
+                            style={{
+                                color: colors.textSecondary,
+                                fontSize: fontSize.sm,
+                            }}
+                        >
                             {command.cancel_reason}
                         </Text>
                     </View>
                 ) : command.status === "cancelled" ? (
-                    <View style={{
-                        marginTop: spacing.m,
-                        padding: spacing.m,
-                        backgroundColor: colors.bgSecondary,
-                        borderRadius: borderRadius.sm,
-                    }}>
-                        <Text style={{ color: colors.textMuted, fontSize: fontSize.sm, fontStyle: "italic" }}>
+                    <View
+                        style={{
+                            marginTop: spacing.m,
+                            padding: spacing.m,
+                            backgroundColor: colors.bgSecondary,
+                            borderRadius: borderRadius.sm,
+                        }}
+                    >
+                        <Text
+                            style={{
+                                color: colors.textMuted,
+                                fontSize: fontSize.sm,
+                                fontStyle: "italic",
+                            }}
+                        >
                             Aucun motif fourni
                         </Text>
                     </View>
@@ -734,69 +679,21 @@ export default function OrderDetailScreen() {
                     <Text style={styles.sectionTitle}>Suivi du livreur</Text>
                     {hasMap ? (
                         <View style={styles.mapContainer}>
-                            <MapView
+                            <TomTomMap
                                 ref={mapRef}
-                                provider={PROVIDER_DEFAULT}
                                 style={styles.map}
-                                initialRegion={{
-                                    latitude: livreurCoords!.latitude,
-                                    longitude: livreurCoords!.longitude,
-                                    latitudeDelta: 0.02,
-                                    longitudeDelta: 0.02,
-                                }}
-                                onMapReady={() => fitMapToRoute(mapRef)}
-                            >
-                                <Marker
-                                    coordinate={livreurCoords!}
-                                    title={command.livreur_assign}
-                                >
-                                    <View style={styles.driverMarkerOuter}>
-                                        <View style={styles.driverMarkerInner}>
-                                            <Ionicons
-                                                name="bicycle"
-                                                size={14}
-                                                color={colors.white}
-                                            />
-                                        </View>
-                                    </View>
-                                </Marker>
-                                {destCoords && (
-                                    <Marker
-                                        coordinate={destCoords}
-                                        title="Destination"
-                                    >
-                                        <View style={styles.destMarkerOuter}>
-                                            <View
-                                                style={styles.destMarkerInner}
-                                            >
-                                                <Ionicons
-                                                    name="flag"
-                                                    size={12}
-                                                    color={colors.white}
-                                                />
-                                            </View>
-                                        </View>
-                                    </Marker>
-                                )}
-                                {routeInfo &&
-                                    routeInfo.coordinates.length > 0 && (
-                                        <Polyline
-                                            coordinates={routeInfo.coordinates}
-                                            strokeColor="#4285F4"
-                                            strokeWidth={4}
-                                        />
-                                    )}
-                            </MapView>
+                                markers={livreurMarkers}
+                                initialCenter={livreurCoords ?? undefined}
+                                initialZoom={14}
+                            />
 
-                            {/* Route info overlay */}
                             {routeInfo && (
                                 <View style={styles.routeOverlay}>
                                     <Text style={styles.routeOverlayUser}>
                                         {command.livreur_assign}
                                     </Text>
                                     <Text style={styles.routeOverlayInfo}>
-                                        {routeInfo.distance} ·{" "}
-                                        {routeInfo.duration}
+                                        {routeInfo.distance} · {routeInfo.duration}
                                     </Text>
                                 </View>
                             )}
@@ -847,40 +744,69 @@ export default function OrderDetailScreen() {
                 const rep = group[0];
                 const name = rep.produit ?? rep.product_name;
                 const unit = rep.unit || "";
-                const totalQty = group.reduce((s: number, it: any) => s + (it.quantite ?? 0), 0);
-                const totalPrice = group.reduce((s: number, it: any) => s + (it.prix ?? 0), 0);
+                const totalQty = group.reduce(
+                    (s: number, it: any) => s + (it.quantite ?? 0),
+                    0,
+                );
+                const totalPrice = group.reduce(
+                    (s: number, it: any) => s + (it.prix ?? 0),
+                    0,
+                );
                 const isMultiple = group.length > 1;
                 return (
-                    <Card key={`${rep.product_id}-${gi}`} style={{ marginBottom: spacing.s }}>
+                    <Card
+                        key={`${rep.product_id}-${gi}`}
+                        style={{ marginBottom: spacing.s }}
+                    >
                         <View style={styles.row}>
-                            <Text style={[styles.itemName, { flex: 1 }]}>{name}</Text>
+                            <Text style={[styles.itemName, { flex: 1 }]}>
+                                {name}
+                            </Text>
                             {rep.category ? (
-                                <Text style={styles.categoryBadge}>{rep.category}</Text>
+                                <Text style={styles.categoryBadge}>
+                                    {rep.category}
+                                </Text>
                             ) : null}
                             <TouchableOpacity
                                 style={styles.itemDeleteBtn}
                                 onPress={() => handleDeleteItem(rep.id, name)}
                             >
-                                <Ionicons name="trash-outline" size={18} color={colors.danger} />
+                                <Ionicons
+                                    name="trash-outline"
+                                    size={18}
+                                    color={colors.danger}
+                                />
                             </TouchableOpacity>
                         </View>
-                        {isMultiple && group.map((item: any, i: number) => (
-                            <View key={item.id} style={styles.subItemRow}>
-                                <Text style={styles.subItemText}>
-                                    {item.quantite}{unit} — {item.prix?.toFixed(2)} €
-                                </Text>
-                                <TouchableOpacity
-                                    onPress={() => handleDeleteItem(item.id, name)}
-                                >
-                                    <Ionicons name="remove-circle-outline" size={16} color={colors.danger} />
-                                </TouchableOpacity>
-                            </View>
-                        ))}
+                        {isMultiple &&
+                            group.map((item: any, i: number) => (
+                                <View key={item.id} style={styles.subItemRow}>
+                                    <Text style={styles.subItemText}>
+                                        {item.quantite}
+                                        {unit} — {item.prix?.toFixed(2)} €
+                                    </Text>
+                                    <TouchableOpacity
+                                        onPress={() =>
+                                            handleDeleteItem(item.id, name)
+                                        }
+                                    >
+                                        <Ionicons
+                                            name="remove-circle-outline"
+                                            size={16}
+                                            color={colors.danger}
+                                        />
+                                    </TouchableOpacity>
+                                </View>
+                            ))}
                         <View style={styles.groupTotalRow}>
                             <Text style={styles.groupTotalQty}>
-                                {isMultiple ? `Total: ${totalQty}${unit}` : `${totalQty}${unit}`}
+                                {isMultiple
+                                    ? `Total: ${totalQty}${unit}`
+                                    : `${totalQty}${unit}`}
+                            </Text>
+                            <Text style={styles.groupTotalPrice}>
+                                {totalPrice.toFixed(2)} €
                             </Text>
-                            <Text style={styles.groupTotalPrice}>{totalPrice.toFixed(2)} €</Text>
                         </View>
                     </Card>
                 );
@@ -894,8 +820,14 @@ export default function OrderDetailScreen() {
                         {categoryEntries.map(([cat, data]) => (
                             <View key={cat} style={styles.categoryRow}>
                                 <Text style={styles.categoryName}>{cat}</Text>
-                                <Text style={styles.categoryQty}>{data.qty.toFixed(data.qty % 1 === 0 ? 0 : 2)}</Text>
-                                <Text style={styles.categoryTotal}>{data.total.toFixed(2)} €</Text>
+                                <Text style={styles.categoryQty}>
+                                    {data.qty.toFixed(
+                                        data.qty % 1 === 0 ? 0 : 2,
+                                    )}
+                                </Text>
+                                <Text style={styles.categoryTotal}>
+                                    {data.total.toFixed(2)} €
+                                </Text>
                             </View>
                         ))}
                     </Card>
@@ -994,53 +926,124 @@ export default function OrderDetailScreen() {
                                 const rep = group[0];
                                 const name = rep.produit ?? rep.product_name;
                                 const unit = rep.unit || "";
-                                const totalQty = group.reduce((s: number, it: any) => s + (it.quantite ?? 0), 0);
-                                const totalPrice = group.reduce((s: number, it: any) => s + (it.prix ?? 0), 0);
+                                const totalQty = group.reduce(
+                                    (s: number, it: any) =>
+                                        s + (it.quantite ?? 0),
+                                    0,
+                                );
+                                const totalPrice = group.reduce(
+                                    (s: number, it: any) => s + (it.prix ?? 0),
+                                    0,
+                                );
                                 const isMultiple = group.length > 1;
                                 return (
-                                    <View key={`modal-${rep.product_id}-${gi}`} style={styles.itemsModalCard}>
+                                    <View
+                                        key={`modal-${rep.product_id}-${gi}`}
+                                        style={styles.itemsModalCard}
+                                    >
                                         <View style={styles.row}>
-                                            <Text style={[styles.itemName, { flex: 1 }]}>{name}</Text>
+                                            <Text
+                                                style={[
+                                                    styles.itemName,
+                                                    { flex: 1 },
+                                                ]}
+                                            >
+                                                {name}
+                                            </Text>
                                             {rep.category ? (
-                                                <Text style={styles.categoryBadge}>{rep.category}</Text>
+                                                <Text
+                                                    style={styles.categoryBadge}
+                                                >
+                                                    {rep.category}
+                                                </Text>
                                             ) : null}
                                             <TouchableOpacity
                                                 style={styles.itemDeleteBtn}
                                                 onPress={() => {
                                                     setShowItemsModal(false);
-                                                    handleDeleteItem(rep.id, name);
+                                                    handleDeleteItem(
+                                                        rep.id,
+                                                        name,
+                                                    );
                                                 }}
                                             >
-                                                <Ionicons name="trash-outline" size={18} color={colors.danger} />
+                                                <Ionicons
+                                                    name="trash-outline"
+                                                    size={18}
+                                                    color={colors.danger}
+                                                />
                                             </TouchableOpacity>
                                         </View>
-                                        {isMultiple && group.map((item: any) => (
-                                            <View key={item.id} style={styles.subItemRow}>
-                                                <Text style={styles.subItemText}>
-                                                    {item.quantite}{unit} — {item.prix?.toFixed(2)} €
-                                                </Text>
-                                            </View>
-                                        ))}
+                                        {isMultiple &&
+                                            group.map((item: any) => (
+                                                <View
+                                                    key={item.id}
+                                                    style={styles.subItemRow}
+                                                >
+                                                    <Text
+                                                        style={
+                                                            styles.subItemText
+                                                        }
+                                                    >
+                                                        {item.quantite}
+                                                        {unit} —{" "}
+                                                        {item.prix?.toFixed(2)}{" "}
+                                                        €
+                                                    </Text>
+                                                </View>
+                                            ))}
                                         <View style={styles.groupTotalRow}>
                                             <Text style={styles.groupTotalQty}>
-                                                {isMultiple ? `Total: ${totalQty}${unit}` : `${totalQty}${unit}`}
+                                                {isMultiple
+                                                    ? `Total: ${totalQty}${unit}`
+                                                    : `${totalQty}${unit}`}
+                                            </Text>
+                                            <Text
+                                                style={styles.groupTotalPrice}
+                                            >
+                                                {totalPrice.toFixed(2)} €
                                             </Text>
-                                            <Text style={styles.groupTotalPrice}>{totalPrice.toFixed(2)} €</Text>
                                         </View>
                                     </View>
                                 );
                             })}
                             {/* Récapitulatif catégories dans le modal */}
                             {categoryEntries.length > 0 && (
-                                <View style={{ marginTop: spacing.m, borderTopWidth: 1, borderTopColor: colors.border, paddingTop: spacing.m }}>
-                                    <Text style={[styles.itemsModalTitle, { fontSize: fontSize.md, marginBottom: spacing.s }]}>
+                                <View
+                                    style={{
+                                        marginTop: spacing.m,
+                                        borderTopWidth: 1,
+                                        borderTopColor: colors.border,
+                                        paddingTop: spacing.m,
+                                    }}
+                                >
+                                    <Text
+                                        style={[
+                                            styles.itemsModalTitle,
+                                            {
+                                                fontSize: fontSize.md,
+                                                marginBottom: spacing.s,
+                                            },
+                                        ]}
+                                    >
                                         Par catégorie
                                     </Text>
                                     {categoryEntries.map(([cat, data]) => (
-                                        <View key={cat} style={styles.categoryRow}>
-                                            <Text style={styles.categoryName}>{cat}</Text>
-                                            <Text style={styles.categoryQty}>{data.qty.toFixed(data.qty % 1 === 0 ? 0 : 2)}</Text>
-                                            <Text style={styles.categoryTotal}>{data.total.toFixed(2)} €</Text>
+                                        <View
+                                            key={cat}
+                                            style={styles.categoryRow}
+                                        >
+                                            <Text style={styles.categoryName}>
+                                                {cat}
+                                            </Text>
+                                            <Text style={styles.categoryQty}>
+                                                {data.qty.toFixed(
+                                                    data.qty % 1 === 0 ? 0 : 2,
+                                                )}
+                                            </Text>
+                                            <Text style={styles.categoryTotal}>
+                                                {data.total.toFixed(2)} €
+                                            </Text>
                                         </View>
                                     ))}
                                 </View>