chore: update lockfile and commit all pending release fixes

packages/acquisition-manager/src/module.vue

@@ -1,8 +1,16 @@
 <template>
-	<private-view title="Acquisition Manager">
+	<MintelManagerLayout
+		title="Acquisition Manager"
+		:item-title="getCompanyName(selectedLead) || 'Lead wählen'"
+		:is-empty="!selectedLead"
+		empty-title="Lead auswählen"
+		empty-icon="auto_awesome"
+		:notice="notice"
+		@close-notice="notice = null"
+	>
 		<template #navigation>
 			<v-list nav>
-				<v-list-item @click="showAddLead = true" clickable>
+				<v-list-item @click="openCreateDrawer" clickable>
 					<v-list-item-icon><v-icon name="add" color="var(--theme--primary)" /></v-list-item-icon>
 					<v-list-item-content>
 						<v-text-overflow text="Neuen Lead anlegen" />
@@ -15,7 +23,7 @@
 					v-for="lead in leads"
 					:key="lead.id"
 					:active="selectedLeadId === lead.id"
-					class="lead-item"
+					class="nav-item"
 					clickable
 					@click="selectLead(lead.id)"
 				>
@@ -29,131 +37,118 @@
 			</v-list>
 		</template>
 
-		<template #title-outer:after>
-			<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
-				{{ notice.message }}
-			</v-notice>
+		<template #subtitle>
+			<template v-if="selectedLead">
+				<v-icon name="language" x-small />
+				<a :href="selectedLead.website_url" target="_blank" class="url-link">
+					{{ selectedLead.website_url.replace(/^https?:\/\//, '') }}
+				</a>
+				&middot; Status: {{ selectedLead.status.toUpperCase() }}
+			</template>
 		</template>
 
-		<div class="content-wrapper">
+		<template #actions>
+			<v-button 
+				v-if="selectedLead?.status === 'new'" 
+				secondary 
+				:loading="loadingAudit" 
+				@click="runAudit"
+			>
+				<v-icon name="settings_suggest" left />
+				Audit starten
+			</v-button>
 
-			<div v-if="!selectedLead" class="empty-state">
-				<v-info title="Lead auswählen" icon="auto_awesome" center>
-					Wähle einen Lead in der Navigation aus oder
-					<v-button x-small @click="showAddLead = true">registriere einen neuen Lead</v-button>.
-				</v-info>
-			</div>
+			<template v-if="selectedLead?.status === 'audit_ready'">
+				<v-button secondary :loading="loadingEmail" @click="sendAuditEmail">
+					<v-icon name="mail" left />
+					Audit E-Mail
+				</v-button>
+				<v-button :loading="loadingPdf" @click="generatePdf">
+					<v-icon name="picture_as_pdf" left />
+					PDF Erstellen
+				</v-button>
+			</template>
 
-			<template v-else>
-				<header class="header">
-					<div class="header-left">
-						<h1 class="title">{{ getCompanyName(selectedLead) }}</h1>
-						<p class="subtitle">
-							<v-icon name="language" x-small />
-							<a :href="selectedLead.website_url" target="_blank" class="url-link">
-								{{ selectedLead.website_url.replace(/^https?:\/\//, '') }}
-							</a>
-							&middot; Status: {{ selectedLead.status.toUpperCase() }}
-						</p>
-					</div>
-					<div class="header-right">
-						<v-button 
-							v-if="selectedLead.status === 'new'" 
-							secondary 
-							:loading="loadingAudit" 
-							@click="runAudit"
-						>
-							<v-icon name="settings_suggest" left />
-							Audit starten
-						</v-button>
+			<v-button v-if="selectedLead?.audit_pdf_path" secondary icon v-tooltip.bottom="'PDF öffnen'" @click="openPdf">
+				<v-icon name="open_in_new" />
+			</v-button>
+			
+			<v-button 
+				v-if="selectedLead?.audit_pdf_path" 
+				primary
+				:loading="loadingEmail"
+				@click="sendEstimateEmail"
+			>
+				<v-icon name="send" left />
+				Angebot senden
+			</v-button>
+		</template>
 
-						<template v-if="selectedLead.status === 'audit_ready'">
-							<v-button secondary :loading="loadingEmail" @click="sendAuditEmail">
-								<v-icon name="mail" left />
-								Audit E-Mail
-							</v-button>
-							<v-button :loading="loadingPdf" @click="generatePdf">
-								<v-icon name="picture_as_pdf" left />
-								PDF Erstellen
-							</v-button>
-						</template>
+		<template #empty-state>
+			Wähle einen Lead in der Navigation aus oder
+			<v-button x-small @click="openCreateDrawer">registriere einen neuen Lead</v-button>.
+		</template>
 
-						<v-button v-if="selectedLead.audit_pdf_path" secondary icon v-tooltip.bottom="'PDF öffnen'" @click="openPdf">
-							<v-icon name="open_in_new" />
-						</v-button>
-						
-						<v-button 
-							v-if="selectedLead.audit_pdf_path" 
-							primary
-							:loading="loadingEmail"
-							@click="sendEstimateEmail"
-						>
-							<v-icon name="send" left />
-							Angebot senden
-						</v-button>
-					</div>
-				</header>
-
-				<div class="sections">
-					<div class="main-info">
-						<div class="form-grid">
-							<div class="field">
-								<span class="label">Kontaktperson</span>
-								<div v-if="selectedLead.contact_person" class="value person-link" @click="goToPerson(selectedLead.contact_person)">
-									{{ getPersonName(selectedLead.contact_person) }}
-								</div>
-								<div v-else class="value text-subdued">Keine Person verknüpft</div>
-							</div>
-							<div class="field full">
-								<span class="label">Briefing / Fokus</span>
-								<div class="value text-block">{{ selectedLead.briefing || 'Kein Briefing hinterlegt.' }}</div>
-							</div>
+		<div v-if="selectedLead" class="sections">
+			<div class="main-info">
+				<div class="form-grid">
+					<div class="field">
+						<span class="label">Kontaktperson</span>
+						<div v-if="selectedLead.contact_person" class="value person-link" @click="goToPerson(selectedLead.contact_person)">
+							{{ getPersonName(selectedLead.contact_person) }}
 						</div>
+						<div v-else class="value text-subdued">Keine Person verknüpft</div>
 					</div>
-
-					<v-divider />
-
-					<div v-if="selectedLead.ai_state" class="ai-observations">
-						<h3 class="section-title">AI Observations & Estimation</h3>
-						
-						<div class="metrics">
-							<v-info label="Projekt-Modus" :value="selectedLead.ai_state.projectType || 'Unbekannt'" />
-							<v-info label="Seitenanzahl" :value="selectedLead.ai_state.sitemap?.length || '0'" />
-						</div>
-
-						<v-table
-							v-if="selectedLead.ai_state.sitemap"
-							:headers="[ { text: 'Seite', value: 'title' }, { text: 'URL', value: 'url' } ]"
-							:items="selectedLead.ai_state.sitemap"
-							class="observation-table"
-						>
-							<template #[`item.title`]="{ item }">
-								<span class="page-title">{{ item.title }}</span>
-							</template>
-							<template #[`item.url`]="{ item }">
-								<span class="page-url">{{ item.url }}</span>
-							</template>
-						</v-table>
+					<div class="field full">
+						<span class="label">Briefing / Fokus</span>
+						<div class="value text-block">{{ selectedLead.briefing || 'Kein Briefing hinterlegt.' }}</div>
 					</div>
 				</div>
-			</template>
+			</div>
+
+			<v-divider />
+
+			<div v-if="selectedLead.ai_state" class="ai-observations">
+				<h3 class="section-title">AI Observations & Estimation</h3>
+				
+				<div class="metrics">
+					<MintelStatCard label="Projekt-Modus" :value="selectedLead.ai_state.projectType || 'Unbekannt'" icon="category" />
+					<MintelStatCard label="Seitenanzahl" :value="selectedLead.ai_state.sitemap?.length || '0'" icon="description" />
+				</div>
+
+				<v-table
+					v-if="selectedLead.ai_state.sitemap"
+					:headers="[ { text: 'Seite', value: 'title' }, { text: 'URL', value: 'url' } ]"
+					:items="selectedLead.ai_state.sitemap"
+					class="observation-table"
+				>
+					<template #[`item.title`]="{ item }">
+						<span class="page-title">{{ item.title }}</span>
+					</template>
+					<template #[`item.url`]="{ item }">
+						<span class="page-url">{{ item.url }}</span>
+					</template>
+				</v-table>
+			</div>
 		</div>
 
 		<!-- Drawer: New Lead -->
 		<v-drawer
-			v-model="showAddLead"
+			v-model="drawerActive"
 			title="Neuen Lead registrieren"
 			icon="person_add"
-			@cancel="showAddLead = false"
+			@cancel="drawerActive = false"
 		>
 			<div class="drawer-content">
 				<div class="form-section">
 					<div class="field">
 						<span class="label">Organisation / Firma (Zentral)</span>
-						<v-select
+						<MintelSelect
 							v-model="newLead.company"
 							:items="companyOptions"
 							placeholder="Bestehende Firma auswählen..."
+							allow-add
+							@add="openQuickAdd('company')"
 						/>
 					</div>
 					<div class="field">
@@ -166,10 +161,12 @@
 					</div>
 					<div class="field">
 						<span class="label">Kontaktperson (Optional)</span>
-						<v-select
+						<MintelSelect
 							v-model="newLead.contact_person"
 							:items="peopleOptions"
 							placeholder="Person auswählen..."
+							allow-add
+							@add="openQuickAdd('person')"
 						/>
 					</div>
 				</div>
@@ -179,12 +176,13 @@
 				</div>
 			</div>
 		</v-drawer>
-	</private-view>
+	</MintelManagerLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useApi } from '@directus/extensions-sdk';
+import { MintelManagerLayout, MintelSelect, MintelStatCard } from '@mintel/directus-extension-toolkit';
 
 const api = useApi();
 const leads = ref<any[]>([]);
@@ -192,7 +190,7 @@ const selectedLeadId = ref<string | null>(null);
 const loadingAudit = ref(false);
 const loadingPdf = ref(false);
 const loadingEmail = ref(false);
-const showAddLead = ref(false);
+const drawerActive = ref(false);
 const savingLead = ref(false);
 const notice = ref<{ type: string; message: string } | null>(null);
 
@@ -222,10 +220,11 @@ const peopleOptions = computed(() =>
 );
 
 function getCompanyName(lead: any) {
+	if (!lead) return '';
 	if (lead.company) {
-		return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || lead.company_name);
+		return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || 'Unbekannte Firma');
 	}
-	return lead.company_name;
+	return 'Unbekannte Organisation';
 }
 
 function getPersonName(id: string | any) {
@@ -236,31 +235,32 @@ function getPersonName(id: string | any) {
 }
 
 function goToPerson(id: string) {
-	// Logic to navigate to people manager or open details
 	notice.value = { type: 'info', message: `Navigiere zu Person: ${id}` };
 }
 
 const selectedLead = computed(() => leads.value.find(l => l.id === selectedLeadId.value));
 
-onMounted(fetchData);
-
 async function fetchData() {
-	const [leadsResp, peopleResp, companiesResp] = await Promise.all([
-		api.get('/items/leads', { 
-			params: { 
-				sort: '-date_created',
-				fields: '*.*'
-			} 
-		}),
-		api.get('/items/people', { params: { sort: 'last_name' } }),
-		api.get('/items/companies', { params: { sort: 'name' } })
-	]);
-	leads.value = leadsResp.data.data;
-	people.value = peopleResp.data.data;
-	companies.value = companiesResp.data.data;
-	
-	if (!selectedLeadId.value && leads.value.length > 0) {
-		selectedLeadId.value = leads.value[0].id;
+	try {
+		const [leadsResp, peopleResp, companiesResp] = await Promise.all([
+			api.get('/items/leads', { 
+				params: { 
+					sort: '-date_created',
+					fields: '*.*'
+				} 
+			}),
+			api.get('/items/people', { params: { sort: 'last_name' } }),
+			api.get('/items/companies', { params: { sort: 'name' } })
+		]);
+		leads.value = leadsResp.data.data;
+		people.value = peopleResp.data.data;
+		companies.value = companiesResp.data.data;
+		
+		if (!selectedLeadId.value && leads.value.length > 0) {
+			selectedLeadId.value = leads.value[0].id;
+		}
+	} catch (e: any) {
+		console.error('Fetch error:', e);
 	}
 }
 
@@ -272,6 +272,17 @@ function selectLead(id: string) {
 	selectedLeadId.value = id;
 }
 
+function openCreateDrawer() {
+	newLead.value = { 
+		company: null,
+		website_url: '', 
+		contact_person: null,
+		briefing: '', 
+		status: 'new' 
+	};
+	drawerActive.value = true;
+}
+
 async function runAudit() {
 	if (!selectedLeadId.value) return;
 	loadingAudit.value = true;
@@ -346,16 +357,9 @@ async function saveLead() {
 		};
 		await api.post('/items/leads', payload);
 		notice.value = { type: 'success', message: 'Lead erfolgreich registriert!' };
-		showAddLead.value = false;
+		drawerActive.value = false;
 		await fetchLeads();
 		selectedLeadId.value = payload.id;
-		newLead.value = { 
-			company: null,
-			website_url: '', 
-			contact_person: null,
-			briefing: '', 
-			status: 'new' 
-		};
 	} catch (e: any) {
 		notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
 	} finally {
@@ -363,6 +367,10 @@ async function saveLead() {
 	}
 }
 
+function openQuickAdd(type: string) {
+	notice.value = { type: 'info', message: `${type === 'company' ? 'Firma' : 'Person'} im jeweiligen Manager anlegen.` };
+}
+
 function getStatusIcon(status: string) {
 	switch(status) {
 		case 'new': return 'fiber_new';
@@ -382,18 +390,13 @@ function getStatusColor(status: string) {
 		default: return 'var(--theme--foreground-subdued)';
 	}
 }
+
+onMounted(fetchData);
 </script>
 
 <style scoped>
-.content-wrapper { padding: 32px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
-.lead-item { cursor: pointer; }
-.header { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
-.header-right { display: flex; gap: 12px; }
-.title { font-size: 24px; font-weight: 800; margin-bottom: 4px; color: var(--theme--foreground); }
-.subtitle { color: var(--theme--foreground-subdued); font-size: 14px; display: flex; align-items: center; gap: 8px; }
 .url-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
 .url-link:hover { border-bottom-color: currentColor; }
-.empty-state { height: 100%; display: flex; align-items: center; justify-content: center; }
 
 .sections { display: flex; flex-direction: column; gap: 32px; }
 
@@ -406,7 +409,7 @@ function getStatusColor(status: string) {
 
 .ai-observations { display: flex; flex-direction: column; gap: 16px; }
 .section-title { font-size: 16px; font-weight: 700; color: var(--theme--foreground); margin-bottom: 8px; }
-.metrics { display: flex; gap: 32px; margin-bottom: 16px; }
+.metrics { display: flex; gap: 24px; margin-bottom: 16px; }
 
 .observation-table { border: 1px solid var(--theme--border); border-radius: 8px; overflow: hidden; }
 .page-title { font-weight: 600; }
@@ -415,6 +418,4 @@ function getStatusColor(status: string) {
 .drawer-content { padding: 24px; display: flex; flex-direction: column; gap: 32px; }
 .form-section { display: flex; flex-direction: column; gap: 20px; }
 .drawer-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
-
-:deep(.v-list-item) { cursor: pointer !important; }
 </style>