feat: rework admin portal with pricing breakdown and document management
- Added pricing snapshot columns to the leads table: daily_subtotal, weekend_subtotal, subtotal_eur, vat_eur, total_eur, deposit_eur, total_days, weekday_count, weekend_day_count. - Updated create_lead RPC to accept and store new pricing parameters. - Enhanced frontend app.js to compute and send pricing details during lead creation. - Introduced new UI elements in admin.html for displaying pricing and documents in a tabbed dialog. - Updated i18n.js with new translation keys for pricing and document management. - Improved styles in styles.css for new dialog components and pricing cards. - Added migration script 06-admin-pricing-documents.sql for database schema changes.
This commit is contained in:
LagoESP
+16
-1
@@ -94,6 +94,7 @@
|
||||
<th data-i18n="adminNameEmail">Name / E-Mail</th>
|
||||
<th data-i18n="adminVehicleTab">Fahrzeug</th>
|
||||
<th data-i18n="adminPeriod">Zeitraum</th>
|
||||
<th data-i18n="adminTotalPrice">Gesamtbetrag</th>
|
||||
<th data-i18n="adminStatus">Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
@@ -116,6 +117,7 @@
|
||||
<th data-i18n="adminNameEmail">Name / E-Mail</th>
|
||||
<th data-i18n="adminPhone">Telefon</th>
|
||||
<th data-i18n="adminSourceLead">Quelle (Lead)</th>
|
||||
<th data-i18n="adminLifetimeValueCol">Gesamtwert</th>
|
||||
<th data-i18n="adminStatus">Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
@@ -213,13 +215,26 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lead detail / qualify dialog -->
|
||||
<!-- Lead detail / qualify dialog (tabbed) -->
|
||||
<dialog id="leadDialog">
|
||||
<div class="dialog-head">
|
||||
<h3 id="leadDialogTitle" style="margin:0;">Lead</h3>
|
||||
<button class="dialog-close" id="leadDialogClose" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="dialog-tabs" id="leadDialogTabs" role="tablist"></div>
|
||||
<div class="dialog-body" id="leadDialogBody"></div>
|
||||
<div class="dialog-footer" id="leadDialogFooter"></div>
|
||||
</dialog>
|
||||
|
||||
<!-- Customer detail dialog (tabbed) -->
|
||||
<dialog id="customerDialog">
|
||||
<div class="dialog-head">
|
||||
<h3 id="customerDialogTitle" style="margin:0;">Kunde</h3>
|
||||
<button class="dialog-close" id="customerDialogClose" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="dialog-tabs" id="customerDialogTabs" role="tablist"></div>
|
||||
<div class="dialog-body" id="customerDialogBody"></div>
|
||||
<div class="dialog-footer" id="customerDialogFooter"></div>
|
||||
</dialog>
|
||||
|
||||
<script type="module" src="admin.js"></script>
|
||||
|
||||
+395
-23
@@ -33,6 +33,15 @@ const leadDialog = document.querySelector("#leadDialog");
|
||||
const leadDialogTitle = document.querySelector("#leadDialogTitle");
|
||||
const leadDialogBody = document.querySelector("#leadDialogBody");
|
||||
const leadDialogClose = document.querySelector("#leadDialogClose");
|
||||
const leadDialogTabs = document.querySelector("#leadDialogTabs");
|
||||
const leadDialogFooter = document.querySelector("#leadDialogFooter");
|
||||
|
||||
const customerDialog = document.querySelector("#customerDialog");
|
||||
const customerDialogTitle = document.querySelector("#customerDialogTitle");
|
||||
const customerDialogBody = document.querySelector("#customerDialogBody");
|
||||
const customerDialogClose = document.querySelector("#customerDialogClose");
|
||||
const customerDialogTabs = document.querySelector("#customerDialogTabs");
|
||||
const customerDialogFooter = document.querySelector("#customerDialogFooter");
|
||||
|
||||
const vehicleForm = document.querySelector("#vehicleForm");
|
||||
const formFeedback = document.querySelector("#formFeedback");
|
||||
@@ -363,12 +372,15 @@ function renderLeads() {
|
||||
leadsEmpty.style.display = rows.length ? "none" : "block";
|
||||
leadsTableBody.innerHTML = "";
|
||||
for (const l of rows) {
|
||||
const total = l.total_eur || 0;
|
||||
const totalStr = total > 0 ? "€ " + total.toLocaleString("de-DE") : "—";
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${fmtDate(l.created_at)}</td>
|
||||
<td><strong>${esc(l.name)}</strong><br /><span class="muted">${esc(l.email)}${l.phone ? " · " + esc(l.phone) : ""}</span></td>
|
||||
<td>${esc(l.vehicle_label || "—")}</td>
|
||||
<td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td>
|
||||
<td style="font-weight:600;color:var(--accent-strong);">${totalStr}</td>
|
||||
<td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td>
|
||||
<td style="white-space:nowrap;">
|
||||
<button class="btn small ghost" data-open="${l.id}">${t("adminDetails")}</button>
|
||||
@@ -387,34 +399,203 @@ function renderLeads() {
|
||||
leadsTableBody.querySelectorAll("[data-reopen]").forEach(b => b.addEventListener("click", () => reopenLead(b.dataset.reopen)));
|
||||
}
|
||||
|
||||
function openLead(id) {
|
||||
// ----- LEAD DOCUMENTS -----
|
||||
async function loadLeadAttachments(leadId) {
|
||||
const { data, error } = await supabase
|
||||
.from("lead_attachments")
|
||||
.select("*")
|
||||
.eq("lead_id", leadId)
|
||||
.order("created_at", { ascending: false });
|
||||
if (error) { console.error(error); return []; }
|
||||
return data || [];
|
||||
}
|
||||
|
||||
async function getAttachmentUrl(attachment) {
|
||||
try {
|
||||
const { data: pub } = supabase.storage
|
||||
.from(attachment.bucket)
|
||||
.getPublicUrl(attachment.file_path);
|
||||
return pub?.publicUrl || null;
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
function docKindIcon(kind) {
|
||||
switch (kind) {
|
||||
case "id_document": return "🪪";
|
||||
case "income_proof": return "💰";
|
||||
default: return "📄";
|
||||
}
|
||||
}
|
||||
|
||||
function docKindLabel(kind) {
|
||||
const lang = getLang();
|
||||
switch (kind) {
|
||||
case "id_document": return lang === "de" ? t("adminIdDoc") : t("adminIdDocEn");
|
||||
case "income_proof": return lang === "de" ? t("adminIncomeDoc") : t("adminIncomeDocEn");
|
||||
default: return lang === "de" ? t("adminOtherDoc") : t("adminOtherDocEn");
|
||||
}
|
||||
}
|
||||
|
||||
function renderDocList(docs) {
|
||||
if (!docs.length) {
|
||||
const lang = getLang();
|
||||
return `<p class="muted" style="text-align:center;padding:1.5rem 0;">${lang === "de" ? t("adminNoDocuments") : t("adminNoDocumentsEn")}</p>`;
|
||||
}
|
||||
let html = "";
|
||||
for (const d of docs) {
|
||||
html += `
|
||||
<div class="doc-item">
|
||||
<div class="doc-info">
|
||||
<span class="doc-icon">${docKindIcon(d.kind)}</span>
|
||||
<div>
|
||||
<strong>${esc(d.file_name)}</strong>
|
||||
<div class="muted">${docKindLabel(d.kind)} · ${fmtDate(d.created_at)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn small ghost" href="#" data-download="${d.file_path}" title="${t("adminDownload")}">⬇</a>
|
||||
</div>`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
// ----- LEAD DIALOG (tabbed) -----
|
||||
const leadTabOrder = ["general", "pricing", "documents", "notes"];
|
||||
const leadTabLabels = {
|
||||
general: () => getLang() === "de" ? t("adminTabGeneral") : t("adminTabGeneralEn"),
|
||||
pricing: () => getLang() === "de" ? t("adminTabPricing") : t("adminTabPricingEn"),
|
||||
documents: () => getLang() === "de" ? t("adminTabDocuments") : t("adminTabDocumentsEn"),
|
||||
notes: () => getLang() === "de" ? t("adminTabNotes") : t("adminTabNotesEn"),
|
||||
};
|
||||
|
||||
async function openLead(id) {
|
||||
const l = state.leads.find(x => x.id === id);
|
||||
if (!l) return;
|
||||
leadDialogTitle.textContent = `${l.name} · ${l.status}`;
|
||||
leadDialogBody.innerHTML = `
|
||||
<dl class="kv">
|
||||
<dt>Eingang</dt><dd>${fmtDate(l.created_at)}</dd>
|
||||
<dt>E-Mail</dt><dd><a href="mailto:${attr(l.email)}">${esc(l.email)}</a></dd>
|
||||
<dt>Telefon</dt><dd>${esc(l.phone || "—")}</dd>
|
||||
<dt>Fahrzeug</dt><dd>${esc(l.vehicle_label || "—")}</dd>
|
||||
<dt>Zeitraum</dt><dd>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</dd>
|
||||
<dt>Nachricht</dt><dd style="white-space:pre-wrap;">${esc(l.message || "—")}</dd>
|
||||
<dt>Status</dt><dd><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></dd>
|
||||
<dt>Notiz</dt><dd><textarea id="leadNote" rows="3" style="width:100%;">${esc(l.admin_notes || "")}</textarea></dd>
|
||||
</dl>
|
||||
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.8rem;">
|
||||
${l.is_active ? `
|
||||
<button class="btn danger" id="dlgDisq">${t("adminReject")}</button>
|
||||
<button class="btn" id="dlgQual">${t("adminQualify")}</button>
|
||||
` : `<button class="btn ghost" id="dlgReopen">${t("adminReopen")}</button>`}
|
||||
</div>`;
|
||||
|
||||
// Build tabs
|
||||
leadDialogTabs.innerHTML = leadTabOrder.map((tab, i) =>
|
||||
`<button class="lead-tab${i === 0 ? " active" : ""}" data-lead-tab="${tab}">${leadTabLabels[tab]()}</button>`
|
||||
).join("");
|
||||
|
||||
// Render first tab
|
||||
await renderLeadTab("general", l);
|
||||
|
||||
leadDialog.showModal();
|
||||
const note = () => document.querySelector("#leadNote").value;
|
||||
document.querySelector("#dlgQual")?.addEventListener("click", () => qualifyLead(l.id, note()));
|
||||
document.querySelector("#dlgDisq")?.addEventListener("click", () => disqualifyLead(l.id, note()));
|
||||
document.querySelector("#dlgReopen")?.addEventListener("click", () => reopenLead(l.id));
|
||||
|
||||
// Tab switching
|
||||
leadDialogTabs.querySelectorAll(".lead-tab").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
leadDialogTabs.querySelectorAll(".lead-tab").forEach(b => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
renderLeadTab(btn.dataset.leadTab, l);
|
||||
});
|
||||
});
|
||||
|
||||
// Download handlers
|
||||
leadDialogBody.querySelectorAll("[data-download]").forEach(btn => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const path = btn.dataset.download;
|
||||
const { data: pub } = supabase.storage.from("customer-documents").getPublicUrl(path);
|
||||
if (pub?.publicUrl) window.open(pub.publicUrl, "_blank");
|
||||
});
|
||||
});
|
||||
|
||||
leadDialogClose.addEventListener("click", () => leadDialog.close(), { once: true });
|
||||
}
|
||||
|
||||
async function renderLeadTab(tab, l) {
|
||||
if (tab === "general") {
|
||||
leadDialogBody.innerHTML = `
|
||||
<dl class="kv">
|
||||
<dt>${t("adminReceived")}</dt><dd>${fmtDate(l.created_at)}</dd>
|
||||
<dt>E-Mail</dt><dd><a href="mailto:${attr(l.email)}">${esc(l.email)}</a></dd>
|
||||
<dt>${t("adminPhone")}</dt><dd>${esc(l.phone || "—")}</dd>
|
||||
<dt>Fahrzeug</dt><dd>${esc(l.vehicle_label || "—")}</dd>
|
||||
<dt>${t("adminPeriod")}</dt><dd>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}${l.total_days ? " (" + l.total_days + " " + (getLang() === "de" ? t("bpfDays") : t("bpfDaysEn")) + ")" : ""}</dd>
|
||||
<dt>Quelle</dt><dd>${esc(l.source || "website")}</dd>
|
||||
<dt>${t("adminStatus")}</dt><dd><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></dd>
|
||||
<dt>${t("adminNote")}</dt><dd><textarea id="leadNote" rows="3" style="width:100%;resize:vertical;">${esc(l.admin_notes || "")}</textarea></dd>
|
||||
</dl>`;
|
||||
// Re-bind note save
|
||||
const noteArea = document.querySelector("#leadNote");
|
||||
const saveNoteBtn = document.createElement("button");
|
||||
saveNoteBtn.className = "btn small";
|
||||
saveNoteBtn.textContent = t("adminSave");
|
||||
saveNoteBtn.addEventListener("click", async () => {
|
||||
const { error } = await supabase.from("leads").update({ admin_notes: noteArea.value }).eq("id", l.id);
|
||||
if (error) { alert(error.message); }
|
||||
else { saveNoteBtn.textContent = "✓"; setTimeout(() => { saveNoteBtn.textContent = t("adminSave"); }, 1500); }
|
||||
});
|
||||
leadDialogBody.appendChild(saveNoteBtn);
|
||||
} else if (tab === "pricing") {
|
||||
const daily = l.daily_subtotal || 0;
|
||||
const weekend = l.weekend_subtotal || 0;
|
||||
const sub = l.subtotal_eur || 0;
|
||||
const vat = l.vat_eur || 0;
|
||||
const total = l.total_eur || 0;
|
||||
const deposit = l.deposit_eur || 0;
|
||||
const lang = getLang();
|
||||
leadDialogBody.innerHTML = `
|
||||
<div class="pricing-card">
|
||||
<div class="price-row"><span>${lang === "de" ? t("adminWeekdays") : t("adminWeekdaysEn")} (${l.weekday_count || 0} × € ${l.daily_subtotal && l.weekday_count ? Math.round(daily / l.weekday_count) : "—"})</span><span>€ ${daily.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row"><span>${lang === "de" ? t("adminWeekendRateLabel") : t("adminWeekendRateLabelEn")} (${l.weekend_day_count || 0} × € ${l.weekend_subtotal && l.weekend_day_count ? Math.round(weekend / l.weekend_day_count) : "—"})</span><span>€ ${weekend.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row divider"><span>${lang === "de" ? t("adminSubtotalLabel") : t("adminSubtotalLabelEn")}</span><span>€ ${sub.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row muted"><span>${lang === "de" ? t("adminVatLabel") : t("adminVatLabelEn")}</span><span>€ ${vat.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row total"><span>${lang === "de" ? t("adminTotalLabel") : t("adminTotalLabelEn")}</span><span>€ ${total.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row muted" style="margin-top:0.8rem;"><span>${lang === "de" ? t("adminDepositLabel") : t("adminDepositLabelEn")}</span><span>€ ${deposit.toLocaleString("de-DE")}</span></div>
|
||||
<div class="price-row muted"><span>${lang === "de" ? t("adminIncludedKmLabel") : t("adminIncludedKmLabelEn")}</span><span>${((l.weekday_count || 0) * (state.vehicleMap.get(l.vehicle_id)?.max_daily_km || 150) + (l.weekend_day_count || 0) * (state.vehicleMap.get(l.vehicle_id)?.max_km_weekend || state.vehicleMap.get(l.vehicle_id)?.max_daily_km || 150))} km</span></div>
|
||||
<div class="price-row muted"><span>${lang === "de" ? t("adminTotalDaysLabel") : t("adminTotalDaysLabelEn")}</span><span>${l.total_days || 0}</span></div>
|
||||
</div>`;
|
||||
} else if (tab === "documents") {
|
||||
const docs = await loadLeadAttachments(l.id);
|
||||
leadDialogBody.innerHTML = renderDocList(docs);
|
||||
// Re-bind downloads
|
||||
leadDialogBody.querySelectorAll("[data-download]").forEach(btn => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const path = btn.dataset.download;
|
||||
const { data: pub } = supabase.storage.from("customer-documents").getPublicUrl(path);
|
||||
if (pub?.publicUrl) window.open(pub.publicUrl, "_blank");
|
||||
});
|
||||
});
|
||||
} else if (tab === "notes") {
|
||||
const lang = getLang();
|
||||
leadDialogBody.innerHTML = `
|
||||
<textarea id="leadNoteFull" rows="8" style="width:100%;resize:vertical;font-family:inherit;">${esc(l.admin_notes || "")}</textarea>
|
||||
<div style="display:flex;justify-content:flex-end;margin-top:0.8rem;">
|
||||
<button class="btn small" id="saveNoteFull">${lang === "de" ? t("adminSave") : t("adminSaveEn")}</button>
|
||||
</div>`;
|
||||
document.querySelector("#saveNoteFull").addEventListener("click", async () => {
|
||||
const { error } = await supabase.from("leads").update({ admin_notes: document.querySelector("#leadNoteFull").value }).eq("id", l.id);
|
||||
if (error) { alert(error.message); }
|
||||
else { document.querySelector("#saveNoteFull").textContent = "✓"; setTimeout(() => { document.querySelector("#saveNoteFull").textContent = t("adminSave"); }, 1500); }
|
||||
});
|
||||
}
|
||||
|
||||
// Footer buttons
|
||||
if (l.is_active) {
|
||||
leadDialogFooter.innerHTML = `
|
||||
<div style="display:flex;gap:0.5rem;justify-content:flex-end;">
|
||||
<button class="btn danger" id="dlgDisq">${t("adminReject")}</button>
|
||||
<button class="btn" id="dlgQual">${t("adminQualify")}</button>
|
||||
</div>`;
|
||||
document.querySelector("#dlgQual")?.addEventListener("click", () => {
|
||||
const note = document.querySelector("#leadNote")?.value || document.querySelector("#leadNoteFull")?.value || "";
|
||||
qualifyLead(l.id, note);
|
||||
});
|
||||
document.querySelector("#dlgDisq")?.addEventListener("click", () => {
|
||||
const note = document.querySelector("#leadNote")?.value || document.querySelector("#leadNoteFull")?.value || "";
|
||||
disqualifyLead(l.id, note);
|
||||
});
|
||||
} else {
|
||||
leadDialogFooter.innerHTML = `
|
||||
<div style="display:flex;justify-content:flex-end;">
|
||||
<button class="btn ghost" id="dlgReopen">${t("adminReopen")}</button>
|
||||
</div>`;
|
||||
document.querySelector("#dlgReopen")?.addEventListener("click", () => reopenLead(l.id));
|
||||
}
|
||||
}
|
||||
leadDialogClose.addEventListener("click", () => leadDialog.close());
|
||||
|
||||
async function qualifyLead(id, notes = "") {
|
||||
const { error } = await supabase.rpc("qualify_lead", { p_lead_id: id, p_notes: notes });
|
||||
@@ -444,6 +625,192 @@ async function reopenLead(id) {
|
||||
// =========================================================================
|
||||
// CUSTOMERS
|
||||
// =========================================================================
|
||||
// ----- CUSTOMER LIFETIME VALUE -----
|
||||
function calcCustomerLifetimeValue(customer) {
|
||||
let total = 0;
|
||||
for (const l of state.leads) {
|
||||
if (l.email.toLowerCase() === customer.email.toLowerCase()) {
|
||||
total += l.total_eur || 0;
|
||||
}
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
// ----- CUSTOMER ATTACHMENTS -----
|
||||
async function loadCustomerAttachments(customerId) {
|
||||
const { data, error } = await supabase
|
||||
.from("customer_attachments")
|
||||
.select("*")
|
||||
.eq("customer_id", customerId)
|
||||
.order("created_at", { ascending: false });
|
||||
if (error) { console.error(error); return []; }
|
||||
return data || [];
|
||||
}
|
||||
|
||||
// ----- ORDER HISTORY -----
|
||||
async function loadOrderHistory(email) {
|
||||
const { data, error } = await supabase
|
||||
.from("leads")
|
||||
.select("*")
|
||||
.eq("email", email)
|
||||
.order("created_at", { ascending: false });
|
||||
if (error) { console.error(error); return []; }
|
||||
return data || [];
|
||||
}
|
||||
|
||||
// ----- CUSTOMER DIALOG (tabbed) -----
|
||||
const customerTabOrder = ["info", "documents", "orderHistory"];
|
||||
const customerTabLabels = {
|
||||
info: () => getLang() === "de" ? t("adminTabGeneral") : t("adminTabGeneralEn"),
|
||||
documents: () => getLang() === "de" ? t("adminTabDocuments") : t("adminTabDocumentsEn"),
|
||||
orderHistory: () => getLang() === "de" ? t("adminTabOrderHistory") : t("adminTabOrderHistory"),
|
||||
};
|
||||
|
||||
async function openCustomer(id) {
|
||||
const c = state.customers.find(x => x.id === id);
|
||||
if (!c) return;
|
||||
customerDialogTitle.textContent = `${c.name} · ${c.status}`;
|
||||
|
||||
// Build tabs
|
||||
customerDialogTabs.innerHTML = customerTabOrder.map((tab, i) =>
|
||||
`<button class="customer-tab${i === 0 ? " active" : ""}" data-customer-tab="${tab}">${customerTabLabels[tab]()}</button>`
|
||||
).join("");
|
||||
|
||||
// Render first tab
|
||||
await renderCustomerTab("info", c);
|
||||
|
||||
customerDialog.showModal();
|
||||
|
||||
// Tab switching
|
||||
customerDialogTabs.querySelectorAll(".customer-tab").forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
customerDialogTabs.querySelectorAll(".customer-tab").forEach(b => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
renderCustomerTab(btn.dataset.customerTab, c);
|
||||
});
|
||||
});
|
||||
|
||||
// Download handlers
|
||||
customerDialogBody.querySelectorAll("[data-download]").forEach(btn => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const path = btn.dataset.download;
|
||||
const { data: pub } = supabase.storage.from("customer-documents").getPublicUrl(path);
|
||||
if (pub?.publicUrl) window.open(pub.publicUrl, "_blank");
|
||||
});
|
||||
});
|
||||
|
||||
customerDialogClose.addEventListener("click", () => customerDialog.close(), { once: true });
|
||||
}
|
||||
|
||||
async function renderCustomerTab(tab, c) {
|
||||
if (tab === "info") {
|
||||
const lang = getLang();
|
||||
customerDialogBody.innerHTML = `
|
||||
<dl class="kv">
|
||||
<dt>${lang === "de" ? "Name" : "Name"}</dt><dd><strong>${esc(c.name)}</strong></dd>
|
||||
<dt>E-Mail</dt><dd><a href="mailto:${attr(c.email)}">${esc(c.email)}</a></dd>
|
||||
<dt>${lang === "de" ? t("adminPhone") : "Phone"}</dt><dd>${esc(c.phone || "—")}</dd>
|
||||
<dt>${lang === "de" ? t("adminFirstContacted") : t("adminFirstContactedEn")}</dt><dd>${fmtDate(c.first_contacted_at)}</dd>
|
||||
<dt>${lang === "de" ? "Status" : "Status"}</dt><dd><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></dd>
|
||||
<dt>${lang === "de" ? t("adminNote") : t("adminNoteEn")}</dt><dd><textarea id="custNote" rows="4" style="width:100%;resize:vertical;">${esc(c.notes || "")}</textarea></dd>
|
||||
</dl>`;
|
||||
const noteArea = document.querySelector("#custNote");
|
||||
const saveBtn = document.createElement("button");
|
||||
saveBtn.className = "btn small";
|
||||
saveBtn.textContent = t("adminSave");
|
||||
saveBtn.addEventListener("click", async () => {
|
||||
const { error } = await supabase.from("customers").update({ notes: noteArea.value }).eq("id", c.id);
|
||||
if (error) { alert(error.message); }
|
||||
else { saveBtn.textContent = "✓"; setTimeout(() => { saveBtn.textContent = t("adminSave"); }, 1500); }
|
||||
});
|
||||
customerDialogBody.appendChild(saveBtn);
|
||||
} else if (tab === "documents") {
|
||||
// Show customer_attachments + inherited lead_attachments
|
||||
const custDocs = await loadCustomerAttachments(c.id);
|
||||
let leadDocs = [];
|
||||
if (c.lead_id) {
|
||||
const leadDocsRaw = await loadLeadAttachments(c.lead_id);
|
||||
// Filter out docs already in custDocs (by file_path)
|
||||
const custPaths = new Set(custDocs.map(d => d.file_path));
|
||||
leadDocs = leadDocsRaw.filter(d => !custPaths.has(d.file_path));
|
||||
}
|
||||
let html = "";
|
||||
if (leadDocs.length) {
|
||||
html += `<h4 style="margin:0 0 0.8rem;font-size:0.9rem;color:var(--muted);">${c.lead_id ? "─ Von Lead übernommen" : ""}</h4>`;
|
||||
html += renderDocList(leadDocs);
|
||||
}
|
||||
if (custDocs.length) {
|
||||
html += `<h4 style="margin:1.2rem 0 0.8rem;font-size:0.9rem;color:var(--muted);">─ Direkt hochgeladen</h4>`;
|
||||
html += renderDocList(custDocs);
|
||||
}
|
||||
if (!leadDocs.length && !custDocs.length) {
|
||||
html = `<p class="muted" style="text-align:center;padding:1.5rem 0;">${getLang() === "de" ? t("adminNoDocuments") : t("adminNoDocumentsEn")}</p>`;
|
||||
}
|
||||
customerDialogBody.innerHTML = html;
|
||||
// Re-bind downloads
|
||||
customerDialogBody.querySelectorAll("[data-download]").forEach(btn => {
|
||||
btn.addEventListener("click", async (e) => {
|
||||
e.preventDefault();
|
||||
const path = btn.dataset.download;
|
||||
const { data: pub } = supabase.storage.from("customer-documents").getPublicUrl(path);
|
||||
if (pub?.publicUrl) window.open(pub.publicUrl, "_blank");
|
||||
});
|
||||
});
|
||||
} else if (tab === "orderHistory") {
|
||||
const orders = await loadOrderHistory(c.email);
|
||||
const lang = getLang();
|
||||
let html = "";
|
||||
if (orders.length) {
|
||||
html += `<table class="admin-table" style="margin-bottom:1rem;">
|
||||
<thead><tr>
|
||||
<th>${lang === "de" ? "Eingang" : "Received"}</th>
|
||||
<th>Fahrzeug</th>
|
||||
<th>${lang === "de" ? "Zeitraum" : "Period"}</th>
|
||||
<th style="text-align:right;">${lang === "de" ? t("adminTotalPrice") : t("adminTotalPrice")}</th>
|
||||
<th>${lang === "de" ? "Status" : "Status"}</th>
|
||||
</tr></thead>
|
||||
<tbody>`;
|
||||
for (const o of orders) {
|
||||
const total = o.total_eur || 0;
|
||||
html += `<tr>
|
||||
<td>${fmtDate(o.created_at)}</td>
|
||||
<td>${esc(o.vehicle_label || "—")}</td>
|
||||
<td>${esc(o.date_from || "—")} → ${esc(o.date_to || "—")}</td>
|
||||
<td style="text-align:right;font-weight:600;color:var(--accent-strong);">${total > 0 ? "€ " + total.toLocaleString("de-DE") : "—"}</td>
|
||||
<td><span class="pill pill-${esc(o.status)}">${esc(o.status)}</span></td>
|
||||
</tr>`;
|
||||
}
|
||||
html += `</tbody></table>`;
|
||||
const lifetime = calcCustomerLifetimeValue(c);
|
||||
html += `<div class="pricing-card" style="margin-top:0.5rem;">
|
||||
<div class="price-row total"><span>${lang === "de" ? t("adminLifetimeValue") : t("adminLifetimeValueEn")}</span><span>€ ${lifetime.toLocaleString("de-DE")}</span></div>
|
||||
</div>`;
|
||||
} else {
|
||||
html = `<p class="muted" style="text-align:center;padding:2rem 0;">Keine Buchungen gefunden.</p>`;
|
||||
}
|
||||
customerDialogBody.innerHTML = html;
|
||||
}
|
||||
|
||||
// Footer
|
||||
customerDialogFooter.innerHTML = `
|
||||
<div style="display:flex;justify-content:flex-end;">
|
||||
<button class="btn ghost" id="dlgCustToggle" data-status="${c.status}">
|
||||
${c.status === "active" ? t("adminSetInactive") : t("adminSetActive")}
|
||||
</button>
|
||||
</div>`;
|
||||
document.querySelector("#dlgCustToggle")?.addEventListener("click", async () => {
|
||||
const next = c.status === "active" ? "inactive" : "active";
|
||||
const { error } = await supabase.from("customers").update({ status: next }).eq("id", c.id);
|
||||
if (error) { alert(error.message); }
|
||||
else {
|
||||
customerDialog.close();
|
||||
await loadCustomers();
|
||||
renderCustomers();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadCustomers() {
|
||||
const { data, error } = await supabase
|
||||
.from("customers")
|
||||
@@ -458,20 +825,25 @@ function renderCustomers() {
|
||||
customersEmpty.style.display = state.customers.length ? "none" : "block";
|
||||
customersTableBody.innerHTML = "";
|
||||
for (const c of state.customers) {
|
||||
const lifetime = calcCustomerLifetimeValue(c);
|
||||
const lifetimeStr = lifetime > 0 ? "€ " + lifetime.toLocaleString("de-DE") : "—";
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${fmtDate(c.first_contacted_at)}</td>
|
||||
<td><strong>${esc(c.name)}</strong><br /><span class="muted">${esc(c.email)}</span></td>
|
||||
<td>${esc(c.phone || "—")}</td>
|
||||
<td><code class="muted">${esc(c.lead_id?.slice(0, 8) || "—")}</code></td>
|
||||
<td style="font-weight:600;color:var(--accent-strong);">${lifetimeStr}</td>
|
||||
<td><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></td>
|
||||
<td style="white-space:nowrap;">
|
||||
<button class="btn small ghost" data-open-cust="${c.id}">${t("adminDetails")}</button>
|
||||
<button class="btn small ghost" data-toggle="${c.id}" data-status="${c.status}">
|
||||
${c.status === "active" ? t("adminSetInactive") : t("adminSetActive")}
|
||||
</button>
|
||||
</td>`;
|
||||
customersTableBody.appendChild(tr);
|
||||
}
|
||||
customersTableBody.querySelectorAll("[data-open-cust]").forEach(b => b.addEventListener("click", () => openCustomer(b.dataset.openCust)));
|
||||
customersTableBody.querySelectorAll("[data-toggle]").forEach(b => b.addEventListener("click", async () => {
|
||||
const id = b.dataset.toggle;
|
||||
const next = b.dataset.status === "active" ? "inactive" : "active";
|
||||
|
||||
+34
-9
@@ -410,16 +410,41 @@ document.querySelector("#bpfSubmit").addEventListener("click", async () => {
|
||||
bookingFeedback.textContent = "...";
|
||||
|
||||
const vehicle = state.vehicles.find(v => v.id === bpfCar.value);
|
||||
const { from, to } = getBpfDates();
|
||||
const vFrom = parseYmdLocal(from);
|
||||
const vTo = parseYmdLocal(to);
|
||||
let weekdayCost = 0, weekendCost = 0, subtotal = 0, vat = 0, total = 0, deposit = 0;
|
||||
let totalDays = 0, weekdays = 0, weekendDays = 0;
|
||||
if (vehicle && vFrom && vTo && vTo > vFrom) {
|
||||
totalDays = Math.ceil((vTo - vFrom) / (1000 * 60 * 60 * 24));
|
||||
weekendDays = bpfDurationMode === "weekend" ? 2 : calcWeekendDays(from, to);
|
||||
weekdays = bpfDurationMode === "weekend" ? 0 : (totalDays - weekendDays);
|
||||
weekdayCost = weekdays * vehicle.daily_price_eur;
|
||||
weekendCost = weekendDays * (vehicle.weekend_price_eur || vehicle.daily_price_eur);
|
||||
subtotal = weekdayCost + weekendCost;
|
||||
vat = Math.round(subtotal * 0.20);
|
||||
total = subtotal + vat;
|
||||
deposit = vehicle.kaution_eur || 5000;
|
||||
}
|
||||
const payload = {
|
||||
p_name: bpfName.value,
|
||||
p_email: bpfEmail.value,
|
||||
p_phone: bpfPhone.value || "",
|
||||
p_vehicle_id: bpfCar.value || null,
|
||||
p_vehicle_label: vehicle ? `${vehicle.brand} ${vehicle.model}` : "",
|
||||
p_date_from: bpfFrom.value || null,
|
||||
p_date_to: bpfTo.value || null,
|
||||
p_message: bpfMessage.value || "",
|
||||
p_source: "website",
|
||||
p_name: bpfName.value,
|
||||
p_email: bpfEmail.value,
|
||||
p_phone: bpfPhone.value || "",
|
||||
p_vehicle_id: bpfCar.value || null,
|
||||
p_vehicle_label: vehicle ? `${vehicle.brand} ${vehicle.model}` : "",
|
||||
p_date_from: bpfFrom.value || null,
|
||||
p_date_to: bpfTo.value || null,
|
||||
p_message: bpfMessage.value || "",
|
||||
p_source: "website",
|
||||
p_daily_subtotal: weekdayCost,
|
||||
p_weekend_subtotal: weekendCost,
|
||||
p_subtotal_eur: subtotal,
|
||||
p_vat_eur: vat,
|
||||
p_total_eur: total,
|
||||
p_deposit_eur: deposit,
|
||||
p_total_days: totalDays,
|
||||
p_weekday_count: weekdays,
|
||||
p_weekend_day_count: weekendDays,
|
||||
};
|
||||
|
||||
// Create lead via RPC (returns inserted id without anon SELECT privileges)
|
||||
|
||||
@@ -170,6 +170,50 @@ export const translations = {
|
||||
adminPeriod: "Zeitraum",
|
||||
adminKaution: "Kaution (€)",
|
||||
adminMaxKmWeekend: "Max. km/Wochenendtag",
|
||||
adminTotalPrice: "Gesamtbetrag",
|
||||
adminLifetimeValueCol: "Gesamtwert",
|
||||
adminTabGeneral: "Allgemein",
|
||||
adminTabGeneralEn: "General",
|
||||
adminTabPricing: "Preise",
|
||||
adminTabPricingEn: "Pricing",
|
||||
adminTabDocuments: "Dokumente",
|
||||
adminTabDocumentsEn: "Documents",
|
||||
adminTabNotes: "Notiz",
|
||||
adminTabNotesEn: "Notes",
|
||||
adminTabOrderHistory: "Order History",
|
||||
adminLifetimeValue: "Gesamtwert aller Buchungen",
|
||||
adminLifetimeValueEn: "Lifetime value",
|
||||
adminDownload: "Download",
|
||||
adminNoDocuments: "Keine Dokumente hochgeladen",
|
||||
adminNoDocumentsEn: "No documents uploaded",
|
||||
adminIdDoc: "Ausweis / Führerschein",
|
||||
adminIdDocEn: "ID / Driving license",
|
||||
adminIncomeDoc: "Lohnzettel",
|
||||
adminIncomeDocEn: "Pay slip",
|
||||
adminOtherDoc: "Sonstiges",
|
||||
adminOtherDocEn: "Other",
|
||||
adminWeekdays: "Wochentage",
|
||||
adminWeekdaysEn: "Weekdays",
|
||||
adminWeekendRateLabel: "Wochenendmiete",
|
||||
adminWeekendRateLabelEn: "Weekend rate",
|
||||
adminSubtotalLabel: "Zwischensumme",
|
||||
adminSubtotalLabelEn: "Subtotal",
|
||||
adminVatLabel: "MwSt. (20%)",
|
||||
adminVatLabelEn: "VAT (20%)",
|
||||
adminTotalLabel: "Gesamtbetrag",
|
||||
adminTotalLabelEn: "Total",
|
||||
adminDepositLabel: "Kaution",
|
||||
adminDepositLabelEn: "Deposit",
|
||||
adminIncludedKmLabel: "Inkl. km",
|
||||
adminIncludedKmLabelEn: "Included km",
|
||||
adminTotalDaysLabel: "Tage gesamt",
|
||||
adminTotalDaysLabelEn: "Total days",
|
||||
adminFirstContacted: "Erster Kontakt",
|
||||
adminFirstContactedEn: "First contacted",
|
||||
adminNote: "Notiz",
|
||||
adminNoteEn: "Note",
|
||||
adminSave: "Speichern",
|
||||
adminSaveEn: "Save",
|
||||
},
|
||||
en: {
|
||||
navCars: "Fleet",
|
||||
@@ -341,6 +385,50 @@ export const translations = {
|
||||
adminPeriod: "Period",
|
||||
adminKaution: "Deposit (€)",
|
||||
adminMaxKmWeekend: "Max. km/weekend day",
|
||||
adminTotalPrice: "Total",
|
||||
adminLifetimeValueCol: "Lifetime",
|
||||
adminTabGeneral: "General",
|
||||
adminTabGeneralEn: "Allgemein",
|
||||
adminTabPricing: "Pricing",
|
||||
adminTabPricingEn: "Preise",
|
||||
adminTabDocuments: "Documents",
|
||||
adminTabDocumentsEn: "Dokumente",
|
||||
adminTabNotes: "Notes",
|
||||
adminTabNotesEn: "Notiz",
|
||||
adminTabOrderHistory: "Order History",
|
||||
adminLifetimeValue: "Lifetime value",
|
||||
adminLifetimeValueEn: "Gesamtwert aller Buchungen",
|
||||
adminDownload: "Download",
|
||||
adminNoDocuments: "No documents uploaded",
|
||||
adminNoDocumentsEn: "Keine Dokumente hochgeladen",
|
||||
adminIdDoc: "ID / Driving license",
|
||||
adminIdDocEn: "Ausweis / Führerschein",
|
||||
adminIncomeDoc: "Pay slip",
|
||||
adminIncomeDocEn: "Lohnzettel",
|
||||
adminOtherDoc: "Other",
|
||||
adminOtherDocEn: "Sonstiges",
|
||||
adminWeekdays: "Weekdays",
|
||||
adminWeekdaysEn: "Wochentage",
|
||||
adminWeekendRateLabel: "Weekend rate",
|
||||
adminWeekendRateLabelEn: "Wochenendmiete",
|
||||
adminSubtotalLabel: "Subtotal",
|
||||
adminSubtotalLabelEn: "Zwischensumme",
|
||||
adminVatLabel: "VAT (20%)",
|
||||
adminVatLabelEn: "MwSt. (20%)",
|
||||
adminTotalLabel: "Total",
|
||||
adminTotalLabelEn: "Gesamtbetrag",
|
||||
adminDepositLabel: "Deposit",
|
||||
adminDepositLabelEn: "Kaution",
|
||||
adminIncludedKmLabel: "Included km",
|
||||
adminIncludedKmLabelEn: "Inkl. km",
|
||||
adminTotalDaysLabel: "Total days",
|
||||
adminTotalDaysLabelEn: "Tage gesamt",
|
||||
adminFirstContacted: "First contacted",
|
||||
adminFirstContactedEn: "Erster Kontakt",
|
||||
adminNote: "Note",
|
||||
adminNoteEn: "Notiz",
|
||||
adminSave: "Save",
|
||||
adminSaveEn: "Speichern",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
+109
-6
@@ -1034,18 +1034,21 @@ input:checked + .toggle-slider:before {
|
||||
.btn.danger:hover { background: #8f3535; }
|
||||
|
||||
/* Dialog */
|
||||
dialog#leadDialog {
|
||||
dialog#leadDialog,
|
||||
dialog#customerDialog {
|
||||
border: 1px solid var(--line); border-radius: var(--radius);
|
||||
background: var(--bg-card); color: var(--text);
|
||||
padding: 0; max-width: 580px; width: 92%;
|
||||
padding: 0; max-width: 640px; width: 94%;
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
dialog#leadDialog[open] {
|
||||
dialog#leadDialog[open],
|
||||
dialog#customerDialog[open] {
|
||||
animation: fadeInScale 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
dialog#leadDialog::backdrop {
|
||||
background: rgba(0,0,0,0.7);
|
||||
dialog#leadDialog::backdrop,
|
||||
dialog#customerDialog::backdrop {
|
||||
background: rgba(0,0,0,0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
}
|
||||
@@ -1071,10 +1074,110 @@ dialog#leadDialog::backdrop {
|
||||
color: var(--text);
|
||||
}
|
||||
.dialog-body { padding: 1.6rem; }
|
||||
dl.kv { display: grid; grid-template-columns: 120px 1fr; gap: 0.6rem 1rem; margin: 0; font-size: 0.9rem; }
|
||||
dl.kv { display: grid; grid-template-columns: 140px 1fr; gap: 0.6rem 1rem; margin: 0; font-size: 0.9rem; }
|
||||
dl.kv dt { color: var(--muted); font-weight: 500; }
|
||||
dl.kv dd { margin: 0; color: var(--text); }
|
||||
|
||||
/* Dialog tabs */
|
||||
.dialog-tabs {
|
||||
display: flex; gap: 0.2rem;
|
||||
padding: 0 1.6rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.01);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.dialog-tabs button {
|
||||
background: transparent; border: none;
|
||||
color: var(--muted); padding: 0.7rem 1rem;
|
||||
font-size: 0.85rem; font-family: "Inter", sans-serif;
|
||||
cursor: pointer; border-bottom: 2px solid transparent;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dialog-tabs button:hover {
|
||||
color: var(--text); background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.dialog-tabs button.active {
|
||||
color: var(--accent-strong); border-bottom-color: var(--accent);
|
||||
background: rgba(196, 138, 66, 0.05);
|
||||
}
|
||||
|
||||
/* Dialog footer */
|
||||
.dialog-footer {
|
||||
padding: 1rem 1.6rem;
|
||||
border-top: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
/* Pricing card */
|
||||
.pricing-card {
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 1.2rem 1.4rem;
|
||||
}
|
||||
.price-row {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0.5rem 0; font-size: 0.92rem;
|
||||
}
|
||||
.price-row.total {
|
||||
font-weight: 700; font-size: 1.15rem; color: var(--accent-strong);
|
||||
border-top: 2px solid var(--accent);
|
||||
padding-top: 0.8rem; margin-top: 0.4rem;
|
||||
}
|
||||
.price-row.divider {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 0.6rem; margin-top: 0.2rem;
|
||||
}
|
||||
.price-row.muted { color: var(--muted); font-size: 0.85rem; }
|
||||
|
||||
/* Document items */
|
||||
.doc-item {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 0.8rem 1rem;
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 0.6rem;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.doc-item:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.doc-info {
|
||||
display: flex; align-items: center; gap: 0.8rem; min-width: 0;
|
||||
}
|
||||
.doc-icon {
|
||||
font-size: 1.4rem; flex-shrink: 0;
|
||||
}
|
||||
.doc-info strong {
|
||||
display: block; font-size: 0.9rem; word-break: break-all;
|
||||
}
|
||||
.doc-info .muted {
|
||||
font-size: 0.8rem; margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* ---------------- Responsive ---------------- */
|
||||
@media (max-width: 900px) {
|
||||
.filters, .booking-form, .admin-grid, .why-grid { grid-template-columns: 1fr; }
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
.section-head { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.main-nav { display: none; position: absolute; right: 1rem; top: 100%; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius); }
|
||||
.main-nav.open { display: flex; }
|
||||
.menu-toggle { display: inline-flex; }
|
||||
.footer-grid { grid-template-columns: 1fr; }
|
||||
.admin-form .row2, .admin-form .row3 { grid-template-columns: 1fr; }
|
||||
dl.kv { grid-template-columns: 100px 1fr; }
|
||||
.dialog-tabs { padding: 0 0.8rem; }
|
||||
.dialog-tabs button { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
|
||||
.dialog-body { padding: 1rem; }
|
||||
.dialog-head { padding: 1rem 1.2rem; }
|
||||
.dialog-footer { padding: 0.8rem 1.2rem; }
|
||||
}
|
||||
|
||||
/* ---------------- Responsive ---------------- */
|
||||
@media (max-width: 900px) {
|
||||
.filters, .booking-form, .admin-grid, .why-grid { grid-template-columns: 1fr; }
|
||||
|
||||
Reference in New Issue
Block a user