mivita/dev/2026-01-23/dhl-return-label-styling.md

DHL Return-Label Visuelle Hervorhebung

Datum: 23.01.2026
Status: ✅ Abgeschlossen

Übersicht

Return-Etiketten (Retouren) werden jetzt in allen Admin-Ansichten deutlich visuell hervorgehoben, um sie von ausgehenden Sendungen zu unterscheiden.

Änderungen

1. DHL Cockpit DataTable

Datei: resources/views/admin/dhl/cockpit.blade.php

Visuelle Änderungen:

• ✅ Typ-Badge: Orange "RETOURE" Badge (statt blau) mit größerer Schrift und Fettdruck
• ✅ ID-Spalte: Orange Text mit Undo-Icon (#123)
• ✅ Zeilen-Highlighting:
  • Leicht orangener Hintergrund (rgba(255, 193, 7, 0.08))
  • Orangener linker Border (3px)
  • Dunklerer Hintergrund beim Hover

CSS:

#dhl-shipments-table tbody tr.return-shipment {
    background-color: rgba(255, 193, 7, 0.08) !important;
    border-left: 3px solid #ffc107;
}
#dhl-shipments-table tbody tr.return-shipment:hover {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

2. Bestelldetails - DHL Sendungen Tabelle

Datei: resources/views/admin/sales/_detail_dhl_shipments.blade.php

Visuelle Änderungen:

• ✅ Zeilen-Hintergrund: Leicht orange hinterlegt (rgba(255, 193, 7, 0.1))
• ✅ ID-Link: Orange Text mit Undo-Icon
• ✅ Badge: Orange "RETOURE" Badge mit Fettdruck

3. DHL Sendung Detail-Ansicht

Datei: resources/views/admin/dhl/show.blade.php

Visuelle Änderungen:

• ✅ Header-Icon: Orange statt blau
• ✅ RETOURE Badge:
  • Größere Schrift (1rem)
  • Fettdruck (font-weight: 700)
  • Mehr Padding (0.5rem 1rem)
  • Orange Hintergrund

4. DataTable Controller

Datei: app/Http/Controllers/DhlShipmentController.php

Änderungen in datatable() Methode:

// ID-Spalte mit Hervorhebung für Returns
->editColumn('id', function ($shipment) {
    $class = $shipment->type === 'return' ? 'text-warning font-weight-bold' : 'text-primary font-weight-semibold';
    $icon = $shipment->type === 'return' ? '<i class="fas fa-undo mr-1"></i>' : '';
    return '<a href="' . route('admin.dhl.show', $shipment) . '" class="' . $class . '">' . $icon . '#' . $shipment->id . '</a>';
})

// Typ-Spalte mit auffälligerem Badge
->addColumn('type', function ($shipment) {
    if ($shipment->type == 'outbound') {
        return '<span class="badge badge-primary"><i class="fas fa-arrow-right"></i> Ausgehend</span>';
    } else {
        return '<span class="badge badge-warning" style="font-size: 0.9rem; font-weight: 600;"><i class="fas fa-undo"></i> RETOURE</span>';
    }
})

Retourenlabel-Button Logik

Wichtig: Der "Retourenlabel erstellen" Button wird NUR für ausgehende Sendungen (outbound) angezeigt, die noch kein Return-Label haben.

Implementierung in allen Ansichten:

1. Cockpit DataTable (Controller):

// Zeile 222-224
if ($shipment->type == 'outbound' && ! $shipment->returns()->count()) {
    $buttons .= '<button type="button" class="btn btn-sm btn-outline-info create-return-btn" ...>';
}

2. Order Detail:

@if($shipment->type === 'outbound' && !$shipment->returns->count())
    <button type="button" class="btn btn-outline-info dhl-create-return-btn" ...>
@endif

3. Shipment Detail:

@if($shipment->type == 'outbound' && !$shipment->returns->count())
    <button type="button" class="btn btn-info mr-2" id="create-return-btn" ...>
@endif

Vorher / Nachher

Vorher:

• Return-Etiketten hatten blaues badge-info Badge
• Keine visuelle Unterscheidung in Tabellen-Zeilen
• Schwer zu erkennen zwischen normalen und Return-Sendungen

Nachher:

• ✅ Deutliches oranges "RETOURE" Badge
• ✅ Orange hinterlegte Zeilen in allen Tabellen
• ✅ Orange gefärbte ID-Links mit Undo-Icon
• ✅ Konsistente Farbgebung über alle Ansichten
• ✅ Kein "Retourenlabel erstellen" Button bei Return-Etiketten

Farb-Schema

• Ausgehende Sendungen: Blau (badge-primary, text-primary)
• Return-Sendungen: Orange (badge-warning, text-warning, #ffc107)

Testing

Test-Szenarien:

1. Cockpit DataTable:

   • Return-Etiketten haben oranges Badge und orangene ID
   • Zeilen sind orange hinterlegt mit linkem Border
   • Hover-Effekt funktioniert
   • "Retourenlabel erstellen" Button erscheint NICHT bei Returns

2. Order Detail:

   • Return-Etiketten in der DHL-Tabelle sind orange hinterlegt
   • Badge ist orange mit "RETOURE" Text
   • "Retourenlabel erstellen" Button erscheint NICHT bei Returns

3. Shipment Detail:

   • Header zeigt großes oranges "RETOURE" Badge
   • Icon ist orange
   • "Retourenlabel erstellen" Button ist NICHT sichtbar

Wichtiger Fix (23.01.2026)

Problem: JavaScript-basierte Text-Suche war fehleranfällig
Lösung: DataTables native DT_RowClass Funktion verwenden

Controller-Änderung:

->addColumn('DT_RowClass', function ($shipment) {
    return $shipment->type === 'return' ? 'return-shipment' : '';
})

View-Änderung:

drawCallback: function () {
    $('[data-toggle="tooltip"]').tooltip();
    // Row classes are now added automatically by DataTables via DT_RowClass
}

✅ Zuverlässiger - basiert auf DB-Werten statt Text-Suche
✅ Performanter - keine JS-Manipulation nach Rendering
✅ Wartbarer - alles im Controller

Geänderte Dateien

1. app/Http/Controllers/DhlShipmentController.php - DT_RowClass hinzugefügt
2. resources/views/admin/dhl/cockpit.blade.php - JavaScript vereinfacht
3. resources/views/admin/dhl/show.blade.php - Header Styling
4. resources/views/admin/sales/_detail_dhl_shipments.blade.php - Zeilen Styling

Technische Details

CSS-Klassen verwendet:

• badge-warning - Bootstrap orange Badge
• text-warning - Bootstrap orange Text
• bg-warning - Bootstrap orange Hintergrund
• return-shipment - Custom CSS-Klasse für DataTable-Zeilen

Icons:

• fas fa-undo - Undo/Return Icon für alle Return-Etiketten
• fas fa-arrow-right - Pfeil für ausgehende Sendungen

Nächste Schritte

• Keine weiteren Anpassungen erforderlich
• Feature ist vollständig implementiert und einsatzbereit