added tree view to customer portal, in employe its uses still list

frontend/src/pages/contracts/ContractList.tsx

@@ -1,14 +1,15 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient, useQueries } from '@tanstack/react-query';
 import { Link, useSearchParams, useNavigate } from 'react-router-dom';
-import { contractApi } from '../../services/api';
+import { contractApi, ContractTreeNode } from '../../services/api';
 import { useAuth } from '../../context/AuthContext';
 import Card from '../../components/ui/Card';
 import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
 import Badge from '../../components/ui/Badge';
-import { Plus, Search, Eye, Edit, Trash2, User, Users } from 'lucide-react';
+import CopyButton from '../../components/ui/CopyButton';
+import { Plus, Search, Eye, Edit, Trash2, User, Users, ChevronDown, ChevronRight } from 'lucide-react';
 import type { Contract, ContractType, ContractStatus } from '../../types';
 
 const typeLabels: Record<ContractType, string> = {
@@ -50,6 +51,9 @@ export default function ContractList() {
   const [status, setStatus] = useState(searchParams.get('status') || '');
   const [page, setPage] = useState(parseInt(searchParams.get('page') || '1', 10));
 
+  // State für aufgeklappte Verträge (Baumstruktur)
+  const [expandedContracts, setExpandedContracts] = useState<Set<number>>(new Set());
+
   const { hasPermission, isCustomer, isCustomerPortal, user } = useAuth();
   const queryClient = useQueryClient();
 
@@ -83,11 +87,49 @@ export default function ContractList() {
       }),
   });
 
-  // Für Kundenportal: Verträge nach Kunde gruppieren
+  // Alle Kunden-IDs ermitteln für Baumstruktur-Queries (Kundenportal)
+  const allCustomerIds = useMemo(() => {
+    if (!isCustomerPortal || !data?.data) return [];
+    const ids = new Set<number>();
+    // Eigene customerId hinzufügen
+    if (user?.customerId) ids.add(user.customerId);
+    // Freigegebene Kunden hinzufügen
+    data.data.forEach(c => ids.add(c.customerId));
+    return [...ids];
+  }, [data?.data, isCustomerPortal, user?.customerId]);
+
+  // Baumstruktur für alle Kunden laden (Kundenportal)
+  const treeQueries = useQueries({
+    queries: allCustomerIds.map(customerId => ({
+      queryKey: ['contract-tree', customerId],
+      queryFn: () => contractApi.getTreeForCustomer(customerId),
+      enabled: isCustomerPortal,
+    })),
+  });
+
+  // Map von customerId zu Baum erstellen
+  const contractTrees = useMemo(() => {
+    const map = new Map<number, ContractTreeNode[]>();
+    allCustomerIds.forEach((customerId, index) => {
+      const queryResult = treeQueries[index];
+      if (queryResult?.data?.data) {
+        map.set(customerId, queryResult.data.data);
+      }
+    });
+    return map;
+  }, [allCustomerIds, treeQueries]);
+
+  // Für Kundenportal: Verträge nach Kunde gruppieren mit Baumstruktur
   const groupedContracts = useMemo(() => {
     if (!isCustomerPortal || !data?.data) return null;
 
-    const groups: Record<number, { customerName: string; isOwn: boolean; contracts: Contract[] }> = {};
+    const groups: Record<number, {
+      customerId: number;
+      customerName: string;
+      isOwn: boolean;
+      contracts: Contract[];
+      tree: ContractTreeNode[];
+    }> = {};
 
     for (const contract of data.data) {
       const customerId = contract.customerId;
@@ -96,9 +138,11 @@ export default function ContractList() {
           ? (contract.customer.companyName || `${contract.customer.firstName} ${contract.customer.lastName}`)
           : `Kunde ${customerId}`;
         groups[customerId] = {
+          customerId,
           customerName,
           isOwn: customerId === user?.customerId,
           contracts: [],
+          tree: contractTrees.get(customerId) || [],
         };
       }
       groups[customerId].contracts.push(contract);
@@ -110,7 +154,114 @@ export default function ContractList() {
       if (!a.isOwn && b.isOwn) return 1;
       return a.customerName.localeCompare(b.customerName);
     });
-  }, [data?.data, isCustomerPortal, user?.customerId]);
+  }, [data?.data, isCustomerPortal, user?.customerId, contractTrees]);
+
+  // Toggle für Aufklappen/Zuklappen (Baumstruktur)
+  const toggleExpand = (contractId: number) => {
+    setExpandedContracts(prev => {
+      const next = new Set(prev);
+      if (next.has(contractId)) {
+        next.delete(contractId);
+      } else {
+        next.add(contractId);
+      }
+      return next;
+    });
+  };
+
+  // Rekursive Rendering-Funktion für Vorgänger (Kundenportal)
+  const renderPredecessors = (predecessors: ContractTreeNode[], depth: number): React.ReactNode => {
+    return predecessors.map(node => (
+      <div key={node.contract.id}>
+        {renderContractNode(node, depth)}
+      </div>
+    ));
+  };
+
+  // Einzelnen Vertragsknoten rendern (Kundenportal)
+  const renderContractNode = (node: ContractTreeNode, depth: number = 0): React.ReactNode => {
+    const { contract, predecessors, hasHistory } = node;
+    const isExpanded = expandedContracts.has(contract.id);
+    const isPredecessor = depth > 0;
+
+    return (
+      <div key={contract.id}>
+        <div
+          className={`
+            border rounded-lg p-4 transition-colors
+            ${isPredecessor ? 'ml-6 border-l-4 border-l-gray-300 bg-gray-50' : 'hover:bg-gray-50'}
+          `}
+        >
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              {/* Aufklapp-Button nur bei Wurzelknoten mit Historie */}
+              {!isPredecessor && hasHistory ? (
+                <button
+                  onClick={() => toggleExpand(contract.id)}
+                  className="p-1 hover:bg-gray-200 rounded transition-colors"
+                  title={isExpanded ? 'Einklappen' : 'Vorgänger anzeigen'}
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="w-4 h-4 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 text-gray-500" />
+                  )}
+                </button>
+              ) : !isPredecessor ? (
+                <div className="w-6" /> // Platzhalter für Ausrichtung
+              ) : null}
+
+              <span className="font-mono flex items-center gap-1">
+                {contract.contractNumber}
+                <CopyButton value={contract.contractNumber} />
+              </span>
+              <Badge>{typeLabels[contract.type as ContractType] || contract.type}</Badge>
+              <Badge variant={statusVariants[contract.status as ContractStatus] || 'default'}>
+                {statusLabels[contract.status as ContractStatus] || contract.status}
+              </Badge>
+
+              {isPredecessor && (
+                <span className="text-xs text-gray-500 ml-2">(Vorgänger)</span>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => navigate(`/contracts/${contract.id}`, {
+                  state: { from: 'contracts' }
+                })}
+                title="Ansehen"
+              >
+                <Eye className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+          {(contract.providerName || contract.provider?.name) && (
+            <p className={`flex items-center gap-1 ${isPredecessor ? 'ml-6' : ''}`}>
+              {contract.providerName || contract.provider?.name}
+              {(contract.tariffName || contract.tariff?.name) && ` - ${contract.tariffName || contract.tariff?.name}`}
+              <CopyButton value={(contract.providerName || contract.provider?.name || '') + ((contract.tariffName || contract.tariff?.name) ? ` - ${contract.tariffName || contract.tariff?.name}` : '')} />
+            </p>
+          )}
+          {contract.startDate && (
+            <p className={`text-sm text-gray-500 ${isPredecessor ? 'ml-6' : ''}`}>
+              Beginn: {new Date(contract.startDate).toLocaleDateString('de-DE')}
+              {contract.endDate &&
+                ` | Ende: ${new Date(contract.endDate).toLocaleDateString('de-DE')}`}
+            </p>
+          )}
+        </div>
+
+        {/* Vorgänger rekursiv rendern - für Wurzel nur wenn aufgeklappt, für Vorgänger immer */}
+        {((depth === 0 && isExpanded) || depth > 0) && predecessors.length > 0 && (
+          <div className="mt-2">
+            {renderPredecessors(predecessors, depth + 1)}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   return (
     <div>
@@ -159,7 +310,7 @@ export default function ContractList() {
         </Card>
       ) : data?.data && data.data.length > 0 ? (
         <>
-          {/* Kundenportal: Gruppierte Ansicht */}
+          {/* Kundenportal: Gruppierte Ansicht mit Baumstruktur */}
           {isCustomerPortal && groupedContracts ? (
             <div className="space-y-6">
               {groupedContracts.map((group) => (
@@ -183,58 +334,14 @@ export default function ContractList() {
                     )}
                   </div>
 
-                  {/* Vertrags-Tabelle */}
-                  <div className="overflow-x-auto">
-                    <table className="w-full">
-                      <thead>
-                        <tr className="border-b">
-                          <th className="text-left py-3 px-4 font-medium text-gray-600">Vertragsnr.</th>
-                          <th className="text-left py-3 px-4 font-medium text-gray-600">Typ</th>
-                          <th className="text-left py-3 px-4 font-medium text-gray-600">Anbieter / Tarif</th>
-                          <th className="text-left py-3 px-4 font-medium text-gray-600">Status</th>
-                          <th className="text-left py-3 px-4 font-medium text-gray-600">Beginn</th>
-                          <th className="text-right py-3 px-4 font-medium text-gray-600">Aktionen</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {group.contracts.map((contract) => (
-                          <tr key={contract.id} className="border-b hover:bg-gray-50">
-                            <td className="py-3 px-4 font-mono text-sm">{contract.contractNumber}</td>
-                            <td className="py-3 px-4">
-                              <Badge>{typeLabels[contract.type]}</Badge>
-                            </td>
-                            <td className="py-3 px-4">
-                              {contract.providerName || '-'}
-                              {contract.tariffName && (
-                                <span className="text-gray-500"> / {contract.tariffName}</span>
-                              )}
-                            </td>
-                            <td className="py-3 px-4">
-                              <Badge variant={statusVariants[contract.status]}>
-                                {statusLabels[contract.status]}
-                              </Badge>
-                            </td>
-                            <td className="py-3 px-4">
-                              {contract.startDate
-                                ? new Date(contract.startDate).toLocaleDateString('de-DE')
-                                : '-'}
-                            </td>
-                            <td className="py-3 px-4 text-right">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => navigate(`/contracts/${contract.id}`, {
-                                  state: { from: 'contracts' }
-                                })}
-                              >
-                                <Eye className="w-4 h-4" />
-                              </Button>
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
+                  {/* Baumstruktur */}
+                  {group.tree.length > 0 ? (
+                    <div className="space-y-4">
+                      {group.tree.map(node => renderContractNode(node, 0))}
+                    </div>
+                  ) : (
+                    <p className="text-gray-500">Keine Verträge vorhanden.</p>
+                  )}
                 </Card>
               ))}
             </div>