Kundenseite: Reiter in der Adresse, Uebersicht mit Umlaut, Protokoll der Kundenansicht

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

src/pages/CustomerDetailPage.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useParams, Link, useNavigate } from 'react-router-dom'
+import { useParams, Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { FaSpinner, FaStar, FaArrowLeft, FaFloppyDisk, FaArrowUp, FaKey, FaArrowUpRightFromSquare, FaBoxArchive, FaBoxOpen, FaTrash } from 'react-icons/fa6'
 import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
 import { PageHeader, Card, Button, Badge, Tabs, EmptyState, Field } from '../components/ui'
@@ -12,6 +12,7 @@ import { useAuth } from '../context/AuthContext'
 import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
 import { customerTabs, resolveCustomerTab } from '../lib/customerTabs'
 import { customerStage, isArchived, isInvoiceReady, setCustomerArchived, upgradeToCustomer } from '../lib/leads'
+import CustomerViewLog from '../components/customer/CustomerViewLog'
 
 const PORTAL_URL = 'https://project.webklar.com'
 
@@ -20,7 +21,13 @@ export default function CustomerDetailPage() {
   const [customer, setCustomer] = useState(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
-  const [tab, setTab] = useState('overview')
+  // Reiter steht in der Adresse (/customers/<id>?tab=protokoll), damit Sammellisten und Team-Mails direkt hineinspringen
+  const [searchParams, setSearchParams] = useSearchParams()
+  const tab = searchParams.get('tab') || 'overview'
+  const setTab = useCallback(
+    (next) => setSearchParams(next === 'overview' ? {} : { tab: next }, { replace: true }),
+    [setSearchParams]
+  )
   const { isAdmin } = useAuth()
   const navigate = useNavigate()
 
@@ -93,6 +100,7 @@ export default function CustomerDetailPage() {
       {activeTab === 'tickets' && <CustomerTickets customerId={customer.$id} />}
       {activeTab === 'invoices' && <CustomerInvoices customer={customer} onShowOverview={() => setTab('overview')} />}
       {activeTab === 'projects' && <CustomerProjects customerId={customer.$id} />}
+      {activeTab === 'protokoll' && <CustomerViewLog customerId={customer.$id} />}
     </div>
   )
 }