Vertragslisten: Karteninhaber + Mobilfunknetz + Kuendigung (rot)

Beide Vertragslisten (Kundenakte-Baum + Hauptmenue /contracts) zeigen bei
Mobilfunkvertraegen mit Rufnummer jetzt zusaetzlich Karteninhaber
(SimCard.cardUser der angezeigten SIM, nur wenn gesetzt) und Netz
(mobileNetwork -> Telekom/Vodafone/Telefonica (o2)) inline. Vertraege mit
Kuendigungsbestaetigung (cancellationConfirmationDate) bekommen eine eigene
Zeile in roter, fetter Schrift.

Backend: getContractTreeForCustomer + getAllContracts selektieren nun
mobileNetwork + cardUser (Tree zusaetzlich cancellationConfirmationDate).
Shared-Helper getContractTypeInfo um cardUser/network + mobileNetworkLabel
erweitert. Beide Listen rendern ueber den Tree-Endpoint.

Verifiziert: tsc + vite build gruen, Tree-Service liefert die Felder,
Helper-Mapping getestet (Vodafone/Telekom/o2, leerer Karteninhaber ausgelassen).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/contracts/ContractList.tsx

@@ -318,6 +318,12 @@ export default function ContractList() {
             return typeInfo ? (
               <p className={`text-sm text-gray-600 ${isPredecessor ? 'ml-6' : ''}`}>
                 <span className="font-medium text-gray-700">{typeInfo.label}:</span> {typeInfo.value}
+                {typeInfo.cardUser && (
+                  <> · <span className="font-medium text-gray-700">Karteninhaber:</span> {typeInfo.cardUser}</>
+                )}
+                {typeInfo.network && (
+                  <> · <span className="font-medium text-gray-700">Netz:</span> {typeInfo.network}</>
+                )}
               </p>
             ) : null;
           })()}
@@ -328,6 +334,11 @@ export default function ContractList() {
                 ` | Ende: ${formatDate(contract.endDate)}`}
             </p>
           )}
+          {contract.cancellationConfirmationDate && (
+            <p className={`text-sm font-semibold text-red-600 ${isPredecessor ? 'ml-6' : ''}`}>
+              Kündigungsbestätigung zum {formatDate(contract.cancellationConfirmationDate)}
+            </p>
+          )}
         </div>
 
         {/* Vorgänger rekursiv rendern - für Wurzel nur wenn aufgeklappt, für Vorgänger immer */}

frontend/src/pages/customers/CustomerDetail.tsx

@@ -1882,6 +1882,12 @@ function ContractsTab({
             return typeInfo ? (
               <p className={`text-sm text-gray-600 ${isPredecessor ? 'ml-6' : ''}`}>
                 <span className="font-medium text-gray-700">{typeInfo.label}:</span> {typeInfo.value}
+                {typeInfo.cardUser && (
+                  <> · <span className="font-medium text-gray-700">Karteninhaber:</span> {typeInfo.cardUser}</>
+                )}
+                {typeInfo.network && (
+                  <> · <span className="font-medium text-gray-700">Netz:</span> {typeInfo.network}</>
+                )}
               </p>
             ) : null;
           })()}
@@ -1892,6 +1898,11 @@ function ContractsTab({
                 ` | Ende: ${formatDate(contract.endDate)}`}
             </p>
           )}
+          {contract.cancellationConfirmationDate && (
+            <p className={`text-sm font-semibold text-red-600 ${isPredecessor ? 'ml-6' : ''}`}>
+              Kündigungsbestätigung zum {formatDate(contract.cancellationConfirmationDate)}
+            </p>
+          )}
         </div>
 
         {/* Vorgänger rekursiv rendern - für Wurzel nur wenn aufgeklappt, für Vorgänger immer */}