Kundenakte → Zähler: Aufklapp-Liste der zugeordneten Verträge

Pro Zähler wird jetzt ein "Verträge (N)" Aufklapp-Bereich angezeigt,
der alle Verträge auflistet, die diesen Zähler nutzen – sowohl als
aktueller Hauptzähler (energyDetails.meterId) als auch über die
Folgezähler-Kette (ContractMeter). Dedupliziert auf contractId.

Jeder Eintrag ist Link auf den Vertrag im neuen Tab, mit
Vertragsnummer, Anbieter und Status-Badge. Folgezähler-Ketten-
Einträge werden mit "(über Folgezähler-Kette)" markiert.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

backend/src/services/customer.service.ts

@@ -87,6 +87,24 @@ export async function getCustomerById(id: number) {
           readings: {
             orderBy: { readingDate: 'desc' },
           },
+          // Verträge, die diesen Zähler aktuell als Hauptzähler nutzen
+          // (energyDetails.meterId === meter.id)
+          energyDetails: {
+            include: {
+              contract: { select: { id: true, contractNumber: true, status: true, type: true, providerName: true } },
+            },
+          },
+          // Verträge, in denen der Zähler in der ContractMeter-Kette steht
+          // (Vorgänger oder Nachfolger über Zählerwechsel)
+          contractMeters: {
+            include: {
+              energyContractDetails: {
+                include: {
+                  contract: { select: { id: true, contractNumber: true, status: true, type: true, providerName: true } },
+                },
+              },
+            },
+          },
         },
       },
       stressfreiEmails: { orderBy: { isActive: 'desc' } },

frontend/src/pages/customers/CustomerDetail.tsx

@@ -1267,6 +1267,7 @@ function MetersTab({
   const hasDeliveryAddress = addresses.some((a) => a.type === 'DELIVERY_RESIDENCE');
   const [showReadingModal, setShowReadingModal] = useState<{ meterId: number; meterType: 'ELECTRICITY' | 'GAS'; tariffModel?: string } | null>(null);
   const [expandedMeter, setExpandedMeter] = useState<number | null>(null);
+  const [expandedContractsForMeter, setExpandedContractsForMeter] = useState<Set<number>>(new Set());
   const [editingReading, setEditingReading] = useState<{ meterId: number; meterType: 'ELECTRICITY' | 'GAS'; tariffModel?: string; reading: any } | null>(null);
   const queryClient = useQueryClient();
 
@@ -1441,6 +1442,77 @@ function MetersTab({
                   </p>
                 )}
 
+                {(() => {
+                  // Zugeordnete Verträge zusammenstellen: zum einen über
+                  // energyDetails (aktueller Hauptzähler), zum anderen über
+                  // contractMeters (Folgezähler-Kette). Dedupliziert auf
+                  // contractId, da ein Zähler über beide Wege auftauchen kann.
+                  const seen = new Set<number>();
+                  const linkedContracts: Array<{ id: number; contractNumber: string; status: string; type: string; providerName?: string; via: 'main' | 'chain' }> = [];
+                  for (const ed of meter.energyDetails || []) {
+                    if (ed.contract && !seen.has(ed.contract.id)) {
+                      seen.add(ed.contract.id);
+                      linkedContracts.push({ ...ed.contract, via: 'main' });
+                    }
+                  }
+                  for (const cm of meter.contractMeters || []) {
+                    const ct = cm.energyContractDetails?.contract;
+                    if (ct && !seen.has(ct.id)) {
+                      seen.add(ct.id);
+                      linkedContracts.push({ ...ct, via: 'chain' });
+                    }
+                  }
+                  if (linkedContracts.length === 0) return null;
+                  const isContractsExpanded = expandedContractsForMeter.has(meter.id);
+                  return (
+                    <div className="mt-3 pt-3 border-t">
+                      <button
+                        type="button"
+                        className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 w-full text-left"
+                        onClick={() => {
+                          setExpandedContractsForMeter((prev) => {
+                            const next = new Set(prev);
+                            if (next.has(meter.id)) next.delete(meter.id);
+                            else next.add(meter.id);
+                            return next;
+                          });
+                        }}
+                      >
+                        {isContractsExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+                        Verträge ({linkedContracts.length})
+                      </button>
+                      {isContractsExpanded && (
+                        <div className="mt-2 space-y-1 ml-6">
+                          {linkedContracts.map((ct) => (
+                            <Link
+                              key={ct.id}
+                              to={`/contracts/${ct.id}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800 hover:underline"
+                            >
+                              <FileText className="w-3 h-3 flex-shrink-0" />
+                              <span className="font-mono">{ct.contractNumber}</span>
+                              {ct.providerName && (
+                                <span className="text-gray-500 font-sans">– {ct.providerName}</span>
+                              )}
+                              <Badge variant={
+                                ct.status === 'ACTIVE' ? 'success'
+                                : ct.status === 'CANCELLED' ? 'danger'
+                                : ct.status === 'EXPIRED' ? 'warning'
+                                : 'default'
+                              }>{ct.status}</Badge>
+                              {ct.via === 'chain' && (
+                                <span className="text-xs text-gray-400">(über Folgezähler-Kette)</span>
+                              )}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })()}
+
                 {sortedReadings.length > 0 && (
                   <div className="mt-3 pt-3 border-t">
                     <div className="flex items-center justify-between mb-2">

frontend/src/types/index.ts

@@ -221,6 +221,38 @@ export interface Meter {
   addressId?: number | null;
   address?: Address;
   readings?: MeterReading[];
+  // Verträge, die diesen Zähler aktuell als Hauptzähler nutzen
+  energyDetails?: Array<{
+    id: number;
+    contractId: number;
+    contract?: {
+      id: number;
+      contractNumber: string;
+      status: ContractStatus;
+      type: string;
+      providerName?: string;
+    };
+  }>;
+  // Verträge, in denen der Zähler in der ContractMeter-Kette steht
+  // (Vorgänger oder Nachfolger über Zählerwechsel)
+  contractMeters?: Array<{
+    id: number;
+    energyContractDetailsId: number;
+    position: number;
+    installedAt?: string;
+    removedAt?: string;
+    energyContractDetails?: {
+      id: number;
+      contractId: number;
+      contract?: {
+        id: number;
+        contractNumber: string;
+        status: ContractStatus;
+        type: string;
+        providerName?: string;
+      };
+    };
+  }>;
 }
 
 export interface ContractMeter {