446 lines
14 KiB
Vue
446 lines
14 KiB
Vue
<template>
|
|
<private-view title="Acquisition Manager">
|
|
<template #navigation>
|
|
<v-list nav>
|
|
<v-list-item @click="showAddLead = true" 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" />
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-divider />
|
|
|
|
<v-list-item
|
|
v-for="lead in leads"
|
|
:key="lead.id"
|
|
:active="selectedLeadId === lead.id"
|
|
class="lead-item"
|
|
clickable
|
|
@click="selectLead(lead.id)"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon :name="getStatusIcon(lead.status)" :color="getStatusColor(lead.status)" />
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-text-overflow :text="getCompanyName(lead)" />
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
|
|
<template #title-outer:after>
|
|
<v-notice v-if="notice" :type="notice.type" @close="notice = null" dismissible>
|
|
{{ notice.message }}
|
|
</v-notice>
|
|
</template>
|
|
|
|
<div class="content-wrapper">
|
|
<v-notice type="success" style="margin-bottom: 16px;">
|
|
DEBUG: Module Version 1.1.0 - Native Build - {{ new Date().toISOString() }}
|
|
</v-notice>
|
|
|
|
<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-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>
|
|
· 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>
|
|
|
|
<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>
|
|
|
|
<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">
|
|
<span class="label">E-Mail (Legacy)</span>
|
|
<div class="value">{{ selectedLead.contact_email || '—' }}</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>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Drawer: New Lead -->
|
|
<v-drawer
|
|
v-model="showAddLead"
|
|
title="Neuen Lead registrieren"
|
|
icon="person_add"
|
|
@cancel="showAddLead = false"
|
|
>
|
|
<div class="drawer-content">
|
|
<div class="form-section">
|
|
<div class="field">
|
|
<span class="label">Organisation / Firma (Zentral)</span>
|
|
<v-select
|
|
v-model="newLead.company"
|
|
:items="companyOptions"
|
|
placeholder="Bestehende Firma auswählen..."
|
|
/>
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">Organisation / Firma (Legacy / Neu)</span>
|
|
<v-input v-model="newLead.company_name" placeholder="z.B. Schmidt GmbH" autofocus />
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">Website URL</span>
|
|
<v-input v-model="newLead.website_url" placeholder="https://..." />
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">Ansprechpartner</span>
|
|
<v-input v-model="newLead.contact_name" placeholder="Vorname Nachname" />
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">E-Mail Adresse</span>
|
|
<v-input v-model="newLead.contact_email" placeholder="email@beispiel.de" type="email" />
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">Briefing / Fokus</span>
|
|
<v-textarea v-model="newLead.briefing" placeholder="Besonderheiten für das Audit..." />
|
|
</div>
|
|
<div class="field">
|
|
<span class="label">Kontaktperson (Optional)</span>
|
|
<v-select
|
|
v-model="newLead.contact_person"
|
|
:items="peopleOptions"
|
|
placeholder="Person auswählen..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drawer-actions">
|
|
<v-button primary block :loading="savingLead" @click="saveLead">Lead speichern</v-button>
|
|
</div>
|
|
</div>
|
|
</v-drawer>
|
|
</private-view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useApi } from '@directus/extensions-sdk';
|
|
|
|
const api = useApi();
|
|
const leads = ref<any[]>([]);
|
|
const selectedLeadId = ref<string | null>(null);
|
|
const loadingAudit = ref(false);
|
|
const loadingPdf = ref(false);
|
|
const loadingEmail = ref(false);
|
|
const showAddLead = ref(false);
|
|
const savingLead = ref(false);
|
|
const notice = ref<{ type: string; message: string } | null>(null);
|
|
|
|
const newLead = ref({
|
|
company_name: '', // Legacy
|
|
company: null,
|
|
website_url: '',
|
|
contact_name: '', // Legacy
|
|
contact_email: '', // Legacy
|
|
contact_person: null,
|
|
briefing: '',
|
|
status: 'new'
|
|
});
|
|
|
|
const companies = ref<any[]>([]);
|
|
const people = ref<any[]>([]);
|
|
|
|
const companyOptions = computed(() =>
|
|
companies.value.map(c => ({
|
|
text: c.name,
|
|
value: c.id
|
|
}))
|
|
);
|
|
|
|
const peopleOptions = computed(() =>
|
|
people.value.map(p => ({
|
|
text: `${p.first_name} ${p.last_name}`,
|
|
value: p.id
|
|
}))
|
|
);
|
|
|
|
function getCompanyName(lead: any) {
|
|
if (lead.company) {
|
|
return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || lead.company_name);
|
|
}
|
|
return lead.company_name;
|
|
}
|
|
|
|
function getPersonName(id: string | any) {
|
|
if (!id) return '';
|
|
if (typeof id === 'object') return `${id.first_name} ${id.last_name}`;
|
|
const person = people.value.find(p => p.id === id);
|
|
return person ? `${person.first_name} ${person.last_name}` : id;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
async function fetchLeads() {
|
|
await fetchData();
|
|
}
|
|
|
|
function selectLead(id: string) {
|
|
selectedLeadId.value = id;
|
|
}
|
|
|
|
async function runAudit() {
|
|
if (!selectedLeadId.value) return;
|
|
loadingAudit.value = true;
|
|
try {
|
|
await api.post(`/acquisition/audit/${selectedLeadId.value}`);
|
|
notice.value = { type: 'success', message: 'Audit erfolgreich gestartet!' };
|
|
await fetchLeads();
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler beim Audit: ${e.message}` };
|
|
} finally {
|
|
loadingAudit.value = false;
|
|
}
|
|
}
|
|
|
|
async function sendAuditEmail() {
|
|
if (!selectedLeadId.value) return;
|
|
loadingEmail.value = true;
|
|
try {
|
|
await api.post(`/acquisition/audit-email/${selectedLeadId.value}`);
|
|
notice.value = { type: 'success', message: 'Audit E-Mail versendet!' };
|
|
await fetchLeads();
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
|
|
} finally {
|
|
loadingEmail.value = false;
|
|
}
|
|
}
|
|
|
|
async function generatePdf() {
|
|
if (!selectedLeadId.value) return;
|
|
loadingPdf.value = true;
|
|
try {
|
|
await api.post(`/acquisition/estimate/${selectedLeadId.value}`);
|
|
notice.value = { type: 'success', message: 'Angebot (PDF) wurde generiert!' };
|
|
await fetchLeads();
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler bei PDF Generierung: ${e.message}` };
|
|
} finally {
|
|
loadingPdf.value = false;
|
|
}
|
|
}
|
|
|
|
async function sendEstimateEmail() {
|
|
if (!selectedLeadId.value) return;
|
|
loadingEmail.value = true;
|
|
try {
|
|
await api.post(`/acquisition/estimate-email/${selectedLeadId.value}`);
|
|
notice.value = { type: 'success', message: 'Angebot erfolgreich versendet!' };
|
|
await fetchLeads();
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler beim Versenden: ${e.message}` };
|
|
} finally {
|
|
loadingEmail.value = false;
|
|
}
|
|
}
|
|
|
|
function openPdf() {
|
|
if (!selectedLead.value?.audit_pdf_path) return;
|
|
window.open(`${window.location.origin}/assets/${selectedLead.value.audit_pdf_path}`, '_blank');
|
|
}
|
|
|
|
async function saveLead() {
|
|
if (!newLead.value.company_name && !newLead.value.company) {
|
|
notice.value = { type: 'danger', message: 'Firma oder Firmenname erforderlich.' };
|
|
return;
|
|
}
|
|
savingLead.value = true;
|
|
try {
|
|
const payload = {
|
|
id: crypto.randomUUID(),
|
|
...newLead.value
|
|
};
|
|
await api.post('/items/leads', payload);
|
|
notice.value = { type: 'success', message: 'Lead erfolgreich registriert!' };
|
|
showAddLead.value = false;
|
|
await fetchLeads();
|
|
selectedLeadId.value = payload.id;
|
|
newLead.value = {
|
|
company_name: '',
|
|
company: null,
|
|
website_url: '',
|
|
contact_name: '',
|
|
contact_email: '',
|
|
contact_person: null,
|
|
briefing: '',
|
|
status: 'new'
|
|
};
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
|
|
} finally {
|
|
savingLead.value = false;
|
|
}
|
|
}
|
|
|
|
function getStatusIcon(status: string) {
|
|
switch(status) {
|
|
case 'new': return 'fiber_new';
|
|
case 'auditing': return 'hourglass_empty';
|
|
case 'audit_ready': return 'check_circle';
|
|
case 'contacted': return 'mail_outline';
|
|
default: return 'help_outline';
|
|
}
|
|
}
|
|
|
|
function getStatusColor(status: string) {
|
|
switch(status) {
|
|
case 'new': return 'var(--theme--primary)';
|
|
case 'auditing': return 'var(--theme--warning)';
|
|
case 'audit_ready': return 'var(--theme--success)';
|
|
case 'contacted': return 'var(--theme--secondary)';
|
|
default: return 'var(--theme--foreground-subdued)';
|
|
}
|
|
}
|
|
</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; }
|
|
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
.field { display: flex; flex-direction: column; gap: 8px; }
|
|
.field.full { grid-column: span 2; }
|
|
.label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--theme--foreground-subdued); letter-spacing: 0.5px; }
|
|
.value { font-size: 15px; color: var(--theme--foreground); }
|
|
.text-block { line-height: 1.6; white-space: pre-wrap; background: var(--theme--background-subdued); padding: 16px; border-radius: 8px; }
|
|
|
|
.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; }
|
|
|
|
.observation-table { border: 1px solid var(--theme--border); border-radius: 8px; overflow: hidden; }
|
|
.page-title { font-weight: 600; }
|
|
.page-url { font-family: var(--family-monospace); font-size: 12px; color: var(--theme--foreground-subdued); }
|
|
|
|
.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>
|