Marc Mintel
d69ade6268
Some checks failed
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 1s
Monorepo Pipeline / 🧪 Test (push) Successful in 2m2s
Monorepo Pipeline / 🧹 Lint (push) Successful in 2m14s
Monorepo Pipeline / 🚀 Release (push) Has been cancelled
Monorepo Pipeline / 🐳 Build Directus (Base) (push) Has been cancelled
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been cancelled
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been cancelled
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been cancelled
Monorepo Pipeline / 🏗️ Build (push) Has been cancelled
422 lines
13 KiB
Vue
422 lines
13 KiB
Vue
<template>
|
|
<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="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" />
|
|
</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="nav-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 #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>
|
|
· Status: {{ selectedLead.status.toUpperCase() }}
|
|
</template>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<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>
|
|
</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>
|
|
|
|
<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>
|
|
<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">
|
|
<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="drawerActive"
|
|
title="Neuen Lead registrieren"
|
|
icon="person_add"
|
|
@cancel="drawerActive = false"
|
|
>
|
|
<div class="drawer-content">
|
|
<div class="form-section">
|
|
<div class="field">
|
|
<span class="label">Organisation / Firma (Zentral)</span>
|
|
<MintelSelect
|
|
v-model="newLead.company"
|
|
:items="companyOptions"
|
|
placeholder="Bestehende Firma auswählen..."
|
|
allow-add
|
|
@add="openQuickAdd('company')"
|
|
/>
|
|
</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">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>
|
|
<MintelSelect
|
|
v-model="newLead.contact_person"
|
|
:items="peopleOptions"
|
|
placeholder="Person auswählen..."
|
|
allow-add
|
|
@add="openQuickAdd('person')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drawer-actions">
|
|
<v-button primary block :loading="savingLead" @click="saveLead">Lead speichern</v-button>
|
|
</div>
|
|
</div>
|
|
</v-drawer>
|
|
</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[]>([]);
|
|
const selectedLeadId = ref<string | null>(null);
|
|
const loadingAudit = ref(false);
|
|
const loadingPdf = ref(false);
|
|
const loadingEmail = ref(false);
|
|
const drawerActive = ref(false);
|
|
const savingLead = ref(false);
|
|
const notice = ref<{ type: string; message: string } | null>(null);
|
|
|
|
const newLead = ref({
|
|
company: null,
|
|
website_url: '',
|
|
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) return '';
|
|
if (lead.company) {
|
|
return typeof lead.company === 'object' ? lead.company.name : (companies.value.find(c => c.id === lead.company)?.name || 'Unbekannte Firma');
|
|
}
|
|
return 'Unbekannte Organisation';
|
|
}
|
|
|
|
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) {
|
|
notice.value = { type: 'info', message: `Navigiere zu Person: ${id}` };
|
|
}
|
|
|
|
const selectedLead = computed(() => leads.value.find(l => l.id === selectedLeadId.value));
|
|
|
|
async function fetchData() {
|
|
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);
|
|
}
|
|
}
|
|
|
|
async function fetchLeads() {
|
|
await fetchData();
|
|
}
|
|
|
|
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;
|
|
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) {
|
|
notice.value = { type: 'danger', message: 'Organisation 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!' };
|
|
drawerActive.value = false;
|
|
await fetchLeads();
|
|
selectedLeadId.value = payload.id;
|
|
} catch (e: any) {
|
|
notice.value = { type: 'danger', message: `Fehler beim Speichern: ${e.message}` };
|
|
} finally {
|
|
savingLead.value = false;
|
|
}
|
|
}
|
|
|
|
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';
|
|
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)';
|
|
}
|
|
}
|
|
|
|
onMounted(fetchData);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.url-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
|
|
.url-link:hover { border-bottom-color: currentColor; }
|
|
|
|
.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: 24px; 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; }
|
|
</style>
|