save email as pdf likae attachment version 2

frontend/src/pages/contracts/ContractDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, Link, useNavigate, useLocation } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { contractApi, uploadApi, meterApi, contractTaskApi, appSettingsApi } from '../../services/api';
 import { ContractEmailsSection } from '../../components/email';
+import { ContractDetailModal } from '../../components/contracts';
 import { useAuth } from '../../context/AuthContext';
 import Card from '../../components/ui/Card';
 import Button from '../../components/ui/Button';
@@ -1062,6 +1063,9 @@ export default function ContractDetail() {
   const [showSipPasswords, setShowSipPasswords] = useState<Record<number, boolean>>({});
   const [decryptedSipPasswords, setDecryptedSipPasswords] = useState<Record<number, string | null>>({});
 
+  // Modal für Vorgängervertrag
+  const [showPredecessorModal, setShowPredecessorModal] = useState(false);
+
   const { data, isLoading } = useQuery({
     queryKey: ['contract', id],
     queryFn: () => contractApi.getById(contractId),
@@ -1270,6 +1274,15 @@ export default function ContractDetail() {
         </div>
         {!isCustomer && (
           <div className="flex gap-2">
+            {c.previousContract && (
+              <Button
+                variant="secondary"
+                onClick={() => setShowPredecessorModal(true)}
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Vorgängervertrag
+              </Button>
+            )}
             {hasPermission('contracts:create') && !c.followUpContract && (
               <Button
                 variant="secondary"
@@ -1320,12 +1333,12 @@ export default function ContractDetail() {
             <div>
               <dt className="text-sm text-gray-500">Vertragsnummer</dt>
               <dd>
-                <Link
-                  to={`/contracts/${c.previousContract.id}`}
+                <button
+                  onClick={() => setShowPredecessorModal(true)}
                   className="text-blue-600 hover:underline"
                 >
                   {c.previousContract.contractNumber}
-                </Link>
+                </button>
               </dd>
             </div>
             {c.previousContract.providerName && (
@@ -2369,6 +2382,15 @@ export default function ContractDetail() {
           <p className="whitespace-pre-wrap">{c.notes}</p>
         </Card>
       )}
+
+      {/* Vorgängervertrag Modal */}
+      {showPredecessorModal && c.previousContract && (
+        <ContractDetailModal
+          contractId={c.previousContract.id}
+          isOpen={true}
+          onClose={() => setShowPredecessorModal(false)}
+        />
+      )}
     </div>
   );
 }