Oliver/admin.derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crm

Browse Source
This commit is contained in:
oliver
2026-06-14 20:10:20 -03:00
parent 880577e498
commit cc1bff3be0
2 changed files with 370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+226
View File
@@ -9,6 +9,7 @@ const ROUTES = {
backup: "/admin/backup-repo",
servers: "/admin/server",
keys: "/admin/key",
crm: "/crm",
};
/* ─── State ──────────────────────────────────────────────────────── */
@@ -19,6 +20,7 @@ let backupRecords = [];
let serversData = [];
let currentServerIdx = 0;
let keysData = [];
let crmRecords = [];
let currentSession = null;
let currentEmail = null;
@@ -187,6 +189,7 @@ document.querySelectorAll(".nav-item[data-section]").forEach((el) => {
servers: "Servers",
keys: "Keys",
sales: "Sales",
crm: "CRM",
};
document.getElementById("page-title").textContent = labels[key] || key;
@@ -208,6 +211,9 @@ document.querySelectorAll(".nav-item[data-section]").forEach((el) => {
} else if (key === "keys") {
topbar.style.display = "";
btnRefresh.onclick = keysLoadRecords;
} else if (key === "crm") {
topbar.style.display = "";
btnRefresh.onclick = crmLoadRecords;
} else {
topbar.style.display = "none";
}
@@ -225,6 +231,9 @@ document.querySelectorAll(".nav-item[data-section]").forEach((el) => {
if (key === "keys" && keysData.length === 0) {
keysLoadRecords();
}
if (key === "crm" && crmRecords.length === 0) {
crmLoadRecords();
}
});
});
@@ -1356,6 +1365,223 @@ async function keysDelete(btn) {
}
}
/* ─── CRM — Load ────────────────────────────────────────────────── */
async function crmLoadRecords() {
const tbody = document.getElementById("crm-table-body");
tbody.innerHTML = `<tr><td colspan="9"><div class="empty-state"><div class="spinner"></div><p style="margin-top:12px;">Loading…</p></div></td></tr>`;
try {
const res = await apiFetch(apiUrl(ROUTES.crm), {
headers: apiHeaders(),
});
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
const json = await res.json();
// Normalise: response may be [[{...},...]] or [{...},...] or {response:[...]}
let data;
if (Array.isArray(json)) {
if (json.length > 0 && Array.isArray(json[0])) {
data = json[0];
} else {
data = json;
}
} else if (json && json.response) {
data = json.response;
} else {
data = [];
}
crmRecords = Array.isArray(data) ? data : [];
crmRender();
toast(
`Loaded ${crmRecords.length} contact${crmRecords.length !== 1 ? "s" : ""}`,
"success",
);
} catch (err) {
crmRecords = [];
tbody.innerHTML = `<tr><td colspan="9"><div class="empty-state">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<p style="margin-top:10px; color:var(--danger);">${err.message}</p>
</div></td></tr>`;
toast("Failed to load CRM contacts: " + err.message, "error");
}
}
/* ─── CRM — Render table ────────────────────────────────────────── */
function crmRender() {
const search = (
document.getElementById("crm-search")?.value ?? ""
).toLowerCase();
const filtered = crmRecords.filter((r) => {
if (!search) return true;
const haystack = [
r.Name,
r.Company,
r.email,
r.Stage,
r.strategy,
r.category,
r.affiliate,
r.History,
r.Number,
]
.filter((v) => v != null)
.join(" ")
.toLowerCase();
return haystack.includes(search);
});
const total = crmRecords.length;
const countEl = document.getElementById("crm-record-count");
countEl.textContent =
filtered.length === total
? `${total} contact${total !== 1 ? "s" : ""}`
: `${filtered.length} / ${total} contacts`;
// Reset check-all state
const checkAll = document.getElementById("crm-check-all");
if (checkAll) checkAll.checked = false;
const tbody = document.getElementById("crm-table-body");
if (filtered.length === 0) {
tbody.innerHTML = `<tr><td colspan="9"><div class="empty-state">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
<p>No contacts found</p>
</div></td></tr>`;
document.getElementById("crm-delete-selected-btn").disabled = true;
return;
}
tbody.innerHTML = filtered
.map((r) => {
const id = r.id;
const name = escHtml(r.Name ?? "");
const company = escHtml(r.Company ?? "");
const email = escHtml(r.email ?? "");
const stage = escHtml(r.Stage ?? "");
const strategy = escHtml(r.strategy ?? "");
const category = escHtml(r.category ?? "");
const dateNext = r.date_next_contact
? formatDate(r.date_next_contact)
: "—";
return `<tr data-crm-id="${id}">
<td><input type="checkbox" class="crm-select" data-id="${id}" onchange="crmUpdateDeleteBtn()" /></td>
<td><strong>${name || "—"}</strong></td>
<td>${company || "—"}</td>
<td><a href="mailto:${email}" style="color:var(--accent)">${email || "—"}</a></td>
<td><span class="badge ${stage === "Hold" ? "badge-other" : "badge-green"}">${stage || "—"}</span></td>
<td style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${strategy}">${strategy || "—"}</td>
<td>${category ? escHtml(category) : "—"}</td>
<td class="text-muted">${dateNext}</td>
<td style="white-space:nowrap;">
<button class="btn btn-danger btn-sm"
data-id="${id}"
data-name="${name}"
onclick="crmDeleteContact(this)">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
<path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
</svg>
Delete
</button>
</td>
</tr>`;
})
.join("");
crmUpdateDeleteBtn();
}
/* ─── CRM — Checkbox helpers ────────────────────────────────────── */
function crmUpdateDeleteBtn() {
const checked = document.querySelectorAll(".crm-select:checked").length;
const btn = document.getElementById("crm-delete-selected-btn");
btn.disabled = checked === 0;
const label =
checked > 0 ? `Delete Selected (${checked})` : "Delete Selected";
btn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px;vertical-align:middle">
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
<path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
</svg> ${label}`;
}
function crmToggleAll() {
const checked = document.getElementById("crm-check-all").checked;
document.querySelectorAll(".crm-select").forEach((cb) => {
cb.checked = checked;
});
crmUpdateDeleteBtn();
}
/* ─── CRM — Delete single contact ──────────────────────────────── */
async function crmDeleteContact(btn) {
const id = btn.dataset.id;
const name = btn.dataset.name || `#${id}`;
const ok = await confirmDialog(
"Delete Contact",
`Delete contact “${name}” (id: ${id})? This cannot be undone.`,
);
if (!ok) return;
try {
const res = await apiFetch(apiUrl(ROUTES.crm), {
method: "DELETE",
headers: apiHeaders(),
body: JSON.stringify({ id: Number(id) }),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
toast(`Contact “${name}” deleted`, "success");
await crmLoadRecords();
} catch (err) {
toast("Delete failed: " + err.message, "error");
}
}
/* ─── CRM — Delete selected contacts ────────────────────────────── */
async function crmDeleteSelected() {
const ids = Array.from(document.querySelectorAll(".crm-select:checked")).map(
(cb) => Number(cb.dataset.id),
);
if (ids.length === 0) return;
const ok = await confirmDialog(
"Delete Selected Contacts",
`Delete ${ids.length} contact${ids.length !== 1 ? "s" : ""}? This cannot be undone.`,
);
if (!ok) return;
// Delete sequentially
let failed = 0;
for (const id of ids) {
try {
const res = await apiFetch(apiUrl(ROUTES.crm), {
method: "DELETE",
headers: apiHeaders(),
body: JSON.stringify({ id }),
});
if (!res.ok) failed++;
} catch {
failed++;
}
}
if (failed === 0) {
toast(
`Deleted ${ids.length} contact${ids.length !== 1 ? "s" : ""}`,
"success",
);
} else {
toast(
`Deleted ${ids.length - failed} contact${ids.length - failed !== 1 ? "s" : ""} (${failed} failed)`,
"warning",
);
}
await crmLoadRecords();
}
/* ─── Init ────────────────────────────────────────────────────────── */
settingsLoad();
const _boot = getCookie("al_session");
index.html
+144
View File
@@ -111,6 +111,24 @@
>
Dashboards
</div>
<div class="nav-item" data-section="crm">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
CRM
</div>
<div class="nav-item" data-section="sales">
<svg
width="16"
@@ -702,6 +720,132 @@
</div>
</div>
<!-- ─── CRM Section ─────────────────────────── -->
<div class="section" id="section-crm">
<!-- Search bar -->
<div
class="card"
style="padding: 14px 20px; margin-bottom: 16px"
>
<div
class="form-row"
style="
flex-wrap: nowrap;
gap: 10px;
align-items: center;
"
>
<div
class="form-group"
style="flex: 1; min-width: 140px"
>
<input
type="text"
id="crm-search"
placeholder="Fulltext search by name, company, email, stage, strategy…"
oninput="crmRender()"
/>
</div>
<div class="form-group" style="flex: 0 0 auto">
<button
class="btn btn-danger btn-sm"
id="crm-delete-selected-btn"
onclick="crmDeleteSelected()"
disabled
style="white-space: nowrap"
>
<svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="3 6 5 6 21 6" />
<path
d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
/>
<path d="M10 11v6M14 11v6" />
<path
d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
/>
</svg>
Delete Selected
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<span class="card-title">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
/>
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
CRM Contacts
</span>
<span
id="crm-record-count"
class="text-muted"
style="font-size: 12px"
></span>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th style="width: 36px">
<input
type="checkbox"
id="crm-check-all"
onchange="crmToggleAll()"
title="Select / deselect all"
/>
</th>
<th>Name</th>
<th>Company</th>
<th>Email</th>
<th>Stage</th>
<th>Strategy</th>
<th>Category</th>
<th>Date Next Contact</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="crm-table-body">
<tr>
<td colspan="9">
<div class="empty-state">
<div class="spinner"></div>
<p style="margin-top: 12px">
Loading contacts…
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ─── Sales Dashboard ─────────────────────────── -->
<div class="section" id="section-sales">
<div class="card">