496 lines
17 KiB
TypeScript
496 lines
17 KiB
TypeScript
/**
|
|
* <folk-crm-view> — API-driven CRM interface.
|
|
*
|
|
* Tabbed view: Pipeline | Contacts | Companies | Graph
|
|
* Fetches from per-space API endpoints on the rNetwork module.
|
|
*/
|
|
|
|
interface Opportunity {
|
|
id: string;
|
|
name: string;
|
|
stage: string;
|
|
amount?: { amountMicros: number; currencyCode: string };
|
|
company?: { id: string; name: string };
|
|
pointOfContact?: { id: string; name: { firstName: string; lastName: string } };
|
|
createdAt?: string;
|
|
closeDate?: string;
|
|
}
|
|
|
|
interface Person {
|
|
id: string;
|
|
name: { firstName: string; lastName: string };
|
|
email?: { primaryEmail: string };
|
|
phone?: { primaryPhoneNumber: string };
|
|
city?: string;
|
|
company?: { id: string; name: { firstName: string; lastName: string } };
|
|
createdAt?: string;
|
|
}
|
|
|
|
interface Company {
|
|
id: string;
|
|
name: string;
|
|
domainName?: { primaryLinkUrl: string };
|
|
employees?: number;
|
|
address?: { addressCity: string; addressCountry: string };
|
|
createdAt?: string;
|
|
}
|
|
|
|
type Tab = "pipeline" | "contacts" | "companies" | "graph";
|
|
|
|
const PIPELINE_STAGES = [
|
|
"INCOMING",
|
|
"MEETING",
|
|
"PROPOSAL",
|
|
"CLOSED_WON",
|
|
"CLOSED_LOST",
|
|
];
|
|
|
|
const STAGE_LABELS: Record<string, string> = {
|
|
INCOMING: "Incoming",
|
|
MEETING: "Meeting",
|
|
PROPOSAL: "Proposal",
|
|
CLOSED_WON: "Won",
|
|
CLOSED_LOST: "Lost",
|
|
};
|
|
|
|
class FolkCrmView extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private space = "";
|
|
private activeTab: Tab = "pipeline";
|
|
private searchQuery = "";
|
|
private sortColumn = "";
|
|
private sortAsc = true;
|
|
|
|
private opportunities: Opportunity[] = [];
|
|
private people: Person[] = [];
|
|
private companies: Company[] = [];
|
|
private loading = true;
|
|
private error = "";
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.space = this.getAttribute("space") || "demo";
|
|
this.render();
|
|
this.loadData();
|
|
}
|
|
|
|
private getApiBase(): string {
|
|
const path = window.location.pathname;
|
|
const match = path.match(/^(\/[^/]+)?\/rnetwork/);
|
|
return match ? match[0] : "";
|
|
}
|
|
|
|
private async loadData() {
|
|
const base = this.getApiBase();
|
|
try {
|
|
const [oppRes, peopleRes, compRes] = await Promise.all([
|
|
fetch(`${base}/api/opportunities`),
|
|
fetch(`${base}/api/people`),
|
|
fetch(`${base}/api/companies`),
|
|
]);
|
|
if (oppRes.ok) {
|
|
const d = await oppRes.json();
|
|
this.opportunities = d.opportunities || [];
|
|
}
|
|
if (peopleRes.ok) {
|
|
const d = await peopleRes.json();
|
|
this.people = d.people || [];
|
|
}
|
|
if (compRes.ok) {
|
|
const d = await compRes.json();
|
|
this.companies = d.companies || [];
|
|
}
|
|
} catch (e) {
|
|
this.error = "Failed to load CRM data";
|
|
}
|
|
this.loading = false;
|
|
this.render();
|
|
}
|
|
|
|
private formatAmount(amount?: { amountMicros: number; currencyCode: string }): string {
|
|
if (!amount || !amount.amountMicros) return "-";
|
|
const value = amount.amountMicros / 1_000_000;
|
|
const currency = amount.currencyCode || "USD";
|
|
try {
|
|
return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }).format(value);
|
|
} catch {
|
|
return `${currency} ${value.toLocaleString()}`;
|
|
}
|
|
}
|
|
|
|
private personName(p?: { firstName: string; lastName: string }): string {
|
|
if (!p) return "-";
|
|
return [p.firstName, p.lastName].filter(Boolean).join(" ") || "-";
|
|
}
|
|
|
|
private companyName(c?: { id: string; name: string | { firstName: string; lastName: string } }): string {
|
|
if (!c) return "-";
|
|
if (typeof c.name === "string") return c.name;
|
|
return [c.name?.firstName, c.name?.lastName].filter(Boolean).join(" ") || "-";
|
|
}
|
|
|
|
private formatDate(d?: string): string {
|
|
if (!d) return "-";
|
|
try { return new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); }
|
|
catch { return "-"; }
|
|
}
|
|
|
|
// ── Pipeline view ──
|
|
private renderPipeline(): string {
|
|
if (this.opportunities.length === 0) {
|
|
return `<div class="empty-state">No opportunities found${this.space === "demo" ? " — connect a Twenty workspace to see pipeline data" : ""}.</div>`;
|
|
}
|
|
|
|
const byStage = new Map<string, Opportunity[]>();
|
|
for (const stage of PIPELINE_STAGES) byStage.set(stage, []);
|
|
for (const opp of this.opportunities) {
|
|
const stage = opp.stage || "INCOMING";
|
|
const list = byStage.get(stage) || byStage.get("INCOMING")!;
|
|
list.push(opp);
|
|
}
|
|
|
|
return `<div class="pipeline-grid">
|
|
${PIPELINE_STAGES.map(stage => {
|
|
const opps = byStage.get(stage) || [];
|
|
const total = opps.reduce((s, o) => s + (o.amount?.amountMicros || 0), 0) / 1_000_000;
|
|
const stageClass = stage.toLowerCase().replace(/_/g, "-");
|
|
return `<div class="pipeline-column">
|
|
<div class="pipeline-header stage-${stageClass}">
|
|
<span class="pipeline-stage-name">${STAGE_LABELS[stage] || stage}</span>
|
|
<span class="pipeline-count">${opps.length}</span>
|
|
</div>
|
|
${total > 0 ? `<div class="pipeline-total">${this.formatAmount({ amountMicros: total * 1_000_000, currencyCode: "USD" })}</div>` : ""}
|
|
<div class="pipeline-cards">
|
|
${opps.map(opp => `<div class="pipeline-card">
|
|
<div class="card-name">${this.esc(opp.name)}</div>
|
|
<div class="card-amount">${this.formatAmount(opp.amount)}</div>
|
|
${opp.company?.name ? `<div class="card-company">${this.esc(opp.company.name)}</div>` : ""}
|
|
${opp.pointOfContact ? `<div class="card-contact">${this.esc(this.personName(opp.pointOfContact.name))}</div>` : ""}
|
|
${opp.closeDate ? `<div class="card-date">Close: ${this.formatDate(opp.closeDate)}</div>` : ""}
|
|
</div>`).join("")}
|
|
</div>
|
|
</div>`;
|
|
}).join("")}
|
|
</div>`;
|
|
}
|
|
|
|
// ── Contacts table ──
|
|
private renderContacts(): string {
|
|
let filtered = this.people;
|
|
if (this.searchQuery.trim()) {
|
|
const q = this.searchQuery.toLowerCase();
|
|
filtered = filtered.filter(p =>
|
|
this.personName(p.name).toLowerCase().includes(q) ||
|
|
(p.email?.primaryEmail || "").toLowerCase().includes(q) ||
|
|
this.companyName(p.company).toLowerCase().includes(q) ||
|
|
(p.city || "").toLowerCase().includes(q)
|
|
);
|
|
}
|
|
|
|
if (this.sortColumn) {
|
|
filtered = [...filtered].sort((a, b) => {
|
|
let va = "", vb = "";
|
|
switch (this.sortColumn) {
|
|
case "name": va = this.personName(a.name); vb = this.personName(b.name); break;
|
|
case "email": va = a.email?.primaryEmail || ""; vb = b.email?.primaryEmail || ""; break;
|
|
case "company": va = this.companyName(a.company); vb = this.companyName(b.company); break;
|
|
case "city": va = a.city || ""; vb = b.city || ""; break;
|
|
}
|
|
const cmp = va.localeCompare(vb);
|
|
return this.sortAsc ? cmp : -cmp;
|
|
});
|
|
}
|
|
|
|
if (filtered.length === 0) {
|
|
return `<div class="empty-state">${this.searchQuery ? "No contacts match your search." : "No contacts found."}</div>`;
|
|
}
|
|
|
|
const sortIcon = (col: string) => this.sortColumn === col ? (this.sortAsc ? " \u25B2" : " \u25BC") : "";
|
|
|
|
return `<table class="data-table">
|
|
<thead><tr>
|
|
<th data-sort="name">Name${sortIcon("name")}</th>
|
|
<th data-sort="email">Email${sortIcon("email")}</th>
|
|
<th data-sort="company">Company${sortIcon("company")}</th>
|
|
<th data-sort="city">City${sortIcon("city")}</th>
|
|
<th>Phone</th>
|
|
</tr></thead>
|
|
<tbody>
|
|
${filtered.map(p => `<tr>
|
|
<td class="cell-name">${this.esc(this.personName(p.name))}</td>
|
|
<td class="cell-email">${p.email?.primaryEmail ? this.esc(p.email.primaryEmail) : "-"}</td>
|
|
<td>${this.esc(this.companyName(p.company))}</td>
|
|
<td>${this.esc(p.city || "-")}</td>
|
|
<td>${this.esc(p.phone?.primaryPhoneNumber || "-")}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>
|
|
<div class="table-footer">${filtered.length} contact${filtered.length !== 1 ? "s" : ""}</div>`;
|
|
}
|
|
|
|
// ── Companies table ──
|
|
private renderCompanies(): string {
|
|
let filtered = this.companies;
|
|
if (this.searchQuery.trim()) {
|
|
const q = this.searchQuery.toLowerCase();
|
|
filtered = filtered.filter(c =>
|
|
(c.name || "").toLowerCase().includes(q) ||
|
|
(c.domainName?.primaryLinkUrl || "").toLowerCase().includes(q) ||
|
|
(c.address?.addressCity || "").toLowerCase().includes(q)
|
|
);
|
|
}
|
|
|
|
if (this.sortColumn) {
|
|
filtered = [...filtered].sort((a, b) => {
|
|
let va = "", vb = "";
|
|
switch (this.sortColumn) {
|
|
case "name": va = a.name || ""; vb = b.name || ""; break;
|
|
case "domain": va = a.domainName?.primaryLinkUrl || ""; vb = b.domainName?.primaryLinkUrl || ""; break;
|
|
case "city": va = a.address?.addressCity || ""; vb = b.address?.addressCity || ""; break;
|
|
case "employees": return this.sortAsc ? (a.employees || 0) - (b.employees || 0) : (b.employees || 0) - (a.employees || 0);
|
|
}
|
|
const cmp = va.localeCompare(vb);
|
|
return this.sortAsc ? cmp : -cmp;
|
|
});
|
|
}
|
|
|
|
if (filtered.length === 0) {
|
|
return `<div class="empty-state">${this.searchQuery ? "No companies match your search." : "No companies found."}</div>`;
|
|
}
|
|
|
|
const sortIcon = (col: string) => this.sortColumn === col ? (this.sortAsc ? " \u25B2" : " \u25BC") : "";
|
|
|
|
return `<table class="data-table">
|
|
<thead><tr>
|
|
<th data-sort="name">Name${sortIcon("name")}</th>
|
|
<th data-sort="domain">Domain${sortIcon("domain")}</th>
|
|
<th data-sort="employees">Employees${sortIcon("employees")}</th>
|
|
<th data-sort="city">City${sortIcon("city")}</th>
|
|
<th>Country</th>
|
|
</tr></thead>
|
|
<tbody>
|
|
${filtered.map(c => `<tr>
|
|
<td class="cell-name">${this.esc(c.name || "-")}</td>
|
|
<td class="cell-domain">${c.domainName?.primaryLinkUrl ? `<a href="${this.esc(c.domainName.primaryLinkUrl)}" target="_blank" rel="noopener">${this.esc(c.domainName.primaryLinkUrl)}</a>` : "-"}</td>
|
|
<td>${c.employees ?? "-"}</td>
|
|
<td>${this.esc(c.address?.addressCity || "-")}</td>
|
|
<td>${this.esc(c.address?.addressCountry || "-")}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>
|
|
<div class="table-footer">${filtered.length} compan${filtered.length !== 1 ? "ies" : "y"}</div>`;
|
|
}
|
|
|
|
// ── Graph link ──
|
|
private renderGraphTab(): string {
|
|
const base = this.getApiBase().replace(/\/crm$/, "");
|
|
return `<div class="graph-link-section">
|
|
<p>View the interactive force-directed relationship graph for this space.</p>
|
|
<a href="${base || `/${this.space}/rnetwork`}" class="graph-link-btn">Open Network Graph</a>
|
|
</div>`;
|
|
}
|
|
|
|
// ── Main render ──
|
|
private render() {
|
|
const tabs: { id: Tab; label: string; count: number }[] = [
|
|
{ id: "pipeline", label: "Pipeline", count: this.opportunities.length },
|
|
{ id: "contacts", label: "Contacts", count: this.people.length },
|
|
{ id: "companies", label: "Companies", count: this.companies.length },
|
|
{ id: "graph", label: "Graph", count: 0 },
|
|
];
|
|
|
|
let content = "";
|
|
if (this.loading) {
|
|
content = `<div class="loading">Loading CRM data...</div>`;
|
|
} else if (this.error) {
|
|
content = `<div class="error">${this.esc(this.error)}</div>`;
|
|
} else {
|
|
switch (this.activeTab) {
|
|
case "pipeline": content = this.renderPipeline(); break;
|
|
case "contacts": content = this.renderContacts(); break;
|
|
case "companies": content = this.renderCompanies(); break;
|
|
case "graph": content = this.renderGraphTab(); break;
|
|
}
|
|
}
|
|
|
|
const showSearch = this.activeTab === "contacts" || this.activeTab === "companies";
|
|
|
|
this.shadow.innerHTML = `
|
|
<style>
|
|
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
|
* { box-sizing: border-box; }
|
|
|
|
.crm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
|
.crm-title { font-size: 15px; font-weight: 600; color: #e2e8f0; }
|
|
|
|
.tabs { display: flex; gap: 2px; background: #16161e; border-radius: 10px; padding: 3px; margin-bottom: 16px; }
|
|
.tab {
|
|
padding: 8px 16px; border-radius: 8px; border: none;
|
|
background: transparent; color: #888; cursor: pointer; font-size: 13px;
|
|
font-weight: 500; transition: all 0.15s;
|
|
}
|
|
.tab:hover { color: #ccc; }
|
|
.tab.active { background: #1e1e2e; color: #e2e8f0; }
|
|
.tab-count { font-size: 11px; color: #555; margin-left: 4px; }
|
|
.tab.active .tab-count { color: #6366f1; }
|
|
|
|
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
|
|
.search-input {
|
|
border: 1px solid #333; border-radius: 8px; padding: 8px 12px;
|
|
background: #16161e; color: #e0e0e0; font-size: 13px; width: 260px; outline: none;
|
|
}
|
|
.search-input:focus { border-color: #6366f1; }
|
|
|
|
.loading { text-align: center; color: #888; padding: 60px 20px; font-size: 14px; }
|
|
.error { text-align: center; color: #ef5350; padding: 40px 20px; }
|
|
.empty-state { text-align: center; color: #666; padding: 60px 20px; font-size: 14px; }
|
|
|
|
/* ── Pipeline grid ── */
|
|
.pipeline-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(${PIPELINE_STAGES.length}, 1fr);
|
|
gap: 12px;
|
|
overflow-x: auto;
|
|
}
|
|
.pipeline-column { min-width: 180px; }
|
|
.pipeline-header {
|
|
padding: 8px 12px; border-radius: 8px 8px 0 0;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
|
|
}
|
|
.stage-incoming { background: #1e293b; color: #93c5fd; }
|
|
.stage-meeting { background: #1e2a1e; color: #86efac; }
|
|
.stage-proposal { background: #2a2a1e; color: #fde68a; }
|
|
.stage-closed-won { background: #1a2e1a; color: #4ade80; }
|
|
.stage-closed-lost { background: #2e1a1a; color: #f87171; }
|
|
.pipeline-count {
|
|
background: rgba(255,255,255,0.1); padding: 1px 7px; border-radius: 10px;
|
|
font-size: 11px;
|
|
}
|
|
.pipeline-total { font-size: 12px; color: #888; padding: 4px 12px; }
|
|
.pipeline-cards { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
|
|
.pipeline-card {
|
|
background: #1e1e2e; border: 1px solid #2a2a3a; border-radius: 8px;
|
|
padding: 12px; transition: border-color 0.15s;
|
|
}
|
|
.pipeline-card:hover { border-color: #444; }
|
|
.card-name { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; }
|
|
.card-amount { font-size: 14px; font-weight: 700; color: #6366f1; margin-bottom: 6px; }
|
|
.card-company { font-size: 12px; color: #94a3b8; }
|
|
.card-contact { font-size: 11px; color: #64748b; margin-top: 2px; }
|
|
.card-date { font-size: 11px; color: #555; margin-top: 4px; }
|
|
|
|
/* ── Data tables ── */
|
|
.data-table {
|
|
width: 100%; border-collapse: collapse;
|
|
background: #16161e; border-radius: 10px; overflow: hidden;
|
|
}
|
|
.data-table th {
|
|
text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600;
|
|
color: #64748b; text-transform: uppercase; letter-spacing: 0.04em;
|
|
border-bottom: 1px solid #222; cursor: pointer; user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
.data-table th:hover { color: #94a3b8; }
|
|
.data-table td {
|
|
padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #1a1a2a;
|
|
color: #c8c8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
max-width: 250px;
|
|
}
|
|
.data-table tr:hover td { background: #1a1a2a; }
|
|
.cell-name { font-weight: 500; color: #e2e8f0; }
|
|
.cell-email { color: #93c5fd; }
|
|
.cell-domain a { color: #93c5fd; text-decoration: none; }
|
|
.cell-domain a:hover { text-decoration: underline; }
|
|
.table-footer { font-size: 12px; color: #555; padding: 10px 14px; }
|
|
|
|
/* ── Graph tab ── */
|
|
.graph-link-section { text-align: center; padding: 60px 20px; }
|
|
.graph-link-section p { color: #888; font-size: 14px; margin-bottom: 16px; }
|
|
.graph-link-btn {
|
|
display: inline-block; padding: 10px 24px; border-radius: 8px;
|
|
background: #6366f1; color: #fff; text-decoration: none;
|
|
font-size: 14px; font-weight: 500; transition: background 0.15s;
|
|
}
|
|
.graph-link-btn:hover { background: #5558e6; }
|
|
|
|
@media (max-width: 900px) {
|
|
.pipeline-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.pipeline-grid { grid-template-columns: 1fr; }
|
|
.tabs { flex-wrap: wrap; }
|
|
.toolbar { flex-direction: column; align-items: stretch; }
|
|
.search-input { width: 100%; }
|
|
.data-table td, .data-table th { padding: 8px 10px; font-size: 12px; }
|
|
}
|
|
</style>
|
|
|
|
<div class="crm-header">
|
|
<span class="crm-title">CRM</span>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
${tabs.map(t => `<button class="tab ${this.activeTab === t.id ? "active" : ""}" data-tab="${t.id}">
|
|
${t.label}${t.count > 0 ? `<span class="tab-count">${t.count}</span>` : ""}
|
|
</button>`).join("")}
|
|
</div>
|
|
|
|
${showSearch ? `<div class="toolbar">
|
|
<input class="search-input" type="text" placeholder="Search..." id="crm-search" value="${this.esc(this.searchQuery)}">
|
|
</div>` : ""}
|
|
|
|
<div class="crm-content">${content}</div>
|
|
`;
|
|
|
|
this.attachListeners();
|
|
}
|
|
|
|
private attachListeners() {
|
|
// Tab switching
|
|
this.shadow.querySelectorAll("[data-tab]").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
this.activeTab = (el as HTMLElement).dataset.tab as Tab;
|
|
this.searchQuery = "";
|
|
this.sortColumn = "";
|
|
this.sortAsc = true;
|
|
this.render();
|
|
});
|
|
});
|
|
|
|
// Search
|
|
let searchTimeout: any;
|
|
this.shadow.getElementById("crm-search")?.addEventListener("input", (e) => {
|
|
this.searchQuery = (e.target as HTMLInputElement).value;
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => this.render(), 200);
|
|
});
|
|
|
|
// Sort columns
|
|
this.shadow.querySelectorAll("[data-sort]").forEach(el => {
|
|
el.addEventListener("click", () => {
|
|
const col = (el as HTMLElement).dataset.sort!;
|
|
if (this.sortColumn === col) {
|
|
this.sortAsc = !this.sortAsc;
|
|
} else {
|
|
this.sortColumn = col;
|
|
this.sortAsc = true;
|
|
}
|
|
this.render();
|
|
});
|
|
});
|
|
}
|
|
|
|
private esc(s: string): string {
|
|
const d = document.createElement("div");
|
|
d.textContent = s || "";
|
|
return d.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define("folk-crm-view", FolkCrmView);
|