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 */}

frontend/src/services/api.ts

@@ -913,6 +913,7 @@ export interface ContractTreeNodeContract {
   status: string;
   startDate: string | null;
   endDate: string | null;
+  cancellationConfirmationDate?: string | null;
   providerName: string | null;
   tariffName: string | null;
   previousContractId: number | null;
@@ -923,7 +924,8 @@ export interface ContractTreeNodeContract {
   address?: { street: string; houseNumber: string; postalCode: string; city: string } | null;
   mobileDetails?: {
     phoneNumber: string | null;
-    simCards: { phoneNumber: string | null; isMain: boolean }[];
+    mobileNetwork?: string | null;
+    simCards: { phoneNumber: string | null; isMain: boolean; cardUser?: string | null }[];
   } | null;
   carInsuranceDetails?: { licensePlate: string | null } | null;
 }

frontend/src/utils/contractInfo.ts

@@ -3,7 +3,8 @@ interface ContractInfoData {
   address?: { street: string; houseNumber: string; postalCode: string; city: string } | null;
   mobileDetails?: {
     phoneNumber: string | null;
-    simCards: { phoneNumber: string | null; isMain: boolean }[];
+    mobileNetwork?: string | null;
+    simCards: { phoneNumber: string | null; isMain: boolean; cardUser?: string | null }[];
   } | null;
   carInsuranceDetails?: { licensePlate: string | null } | null;
 }
@@ -11,6 +12,21 @@ interface ContractInfoData {
 export interface ContractTypeInfo {
   label: string;
   value: string;
+  // Nur bei Mobilfunk zusätzlich befüllt:
+  cardUser?: string;  // wem die Karte gehört (SimCard.cardUser)
+  network?: string;   // Mobilfunknetz, menschenlesbar (Telekom/Vodafone/…)
+}
+
+// Physisches Mobilfunknetz → Anzeigename.
+const MOBILE_NETWORK_LABELS: Record<string, string> = {
+  TELEKOM: 'Telekom',
+  VODAFONE: 'Vodafone',
+  TELEFONICA: 'Telefónica (o2)',
+};
+
+export function mobileNetworkLabel(net?: string | null): string | undefined {
+  if (!net) return undefined;
+  return MOBILE_NETWORK_LABELS[net] ?? net;
 }
 
 export function getContractTypeInfo(contract: ContractInfoData): ContractTypeInfo | null {
@@ -39,9 +55,16 @@ export function getContractTypeInfo(contract: ContractInfoData): ContractTypeInf
     if (!md) return null;
     const mainSim = md.simCards?.find((s) => s.isMain && s.phoneNumber);
     const anySim = md.simCards?.find((s) => s.phoneNumber);
-    const phone = mainSim?.phoneNumber || anySim?.phoneNumber || md.phoneNumber;
+    const sim = mainSim || anySim;
+    const phone = sim?.phoneNumber || md.phoneNumber;
     if (!phone) return null;
-    return { label: 'Rufnummer', value: phone };
+    return {
+      label: 'Rufnummer',
+      value: phone,
+      // Karteninhaber der angezeigten SIM (kann vom Vertragsinhaber abweichen).
+      cardUser: sim?.cardUser?.trim() || undefined,
+      network: mobileNetworkLabel(md.mobileNetwork),
+    };
   }
 
   if (type === 'CAR_INSURANCE') {