/* ============================================================ Mesper CRM — SDR CRM (Phase 1). Firm-centric, mobile-first, EN/DE. Mounts at /crm (and /crm/*). Reuses global Icon/Button/Avatar/RichText etc. ============================================================ */ /* ---- i18n (EN/DE via switch, persisted) ---- */ const CRM_DICT = { en: { crm: "CRM", today: "Today", companies: "Companies", pipeline: "Pipeline", search: "Search companies…", newCompany: "New company", newContact: "New contact", name: "Name", website: "Website / domain", industry: "Industry", status: "Status", leadSource: "Lead source", save: "Save", cancel: "Cancel", create: "Create", add: "Add", edit: "Edit", remove: "Remove", delete: "Delete", contacts: "Contacts", activity: "Activity", notes: "Notes", tasks: "Tasks", deal: "Deal", nextStep: "Next step", addNextStep: "Add next step…", noContacts: "No contacts yet.", noActivity: "No activity yet.", noNotes: "No notes yet.", noTasks: "No open tasks.", logCall: "Log call", logEmail: "Log email", logLinkedin: "Log LinkedIn", logMeeting: "Log meeting", outcome: "Outcome", connected: "Connected", noAnswer: "No answer", voicemail: "Voicemail", meetingBooked: "Meeting booked", notInterested: "Not interested", callback: "Callback", addNote: "Write a note…", addTask: "Add follow-up…", due: "Due", call: "Call", email: "Email", general: "General", open: "Open", markDone: "Done", firstName: "First name", lastName: "Last name", role: "Role", phone: "Phone", primary: "Primary", dnc: "Do not contact", followUp: "Follow-up", noCompanies: "No companies yet — add your first.", quickAdd: "Quick add", value: "Value", stage: "Stage", won: "Won", lost: "Lost", createDeal: "Create deal", noDeal: "No deal yet.", overdue: "Overdue", dueToday: "Due today", upcoming: "Upcoming", allCaughtUp: "All caught up 🎉", back: "Back", statusNew: "New", statusWorking: "Working", statusQualified: "Qualified", statusCustomer: "Customer", statusLost: "Lost", statusDnc: "Do-not-contact", fetchLogo: "Fetch logo", freemailWarn: "Looks like a personal email — mark as non-business?", inDocs: "Mentioned in Docs", links: "Links", linkBoard: "Board", linkDocs: "Docs", asClient: "Add as customer (Board + Docs)", linkMissing: "Add missing link", reports: "Reports", settings: "Settings", sequences: "Sequences", templates: "Templates", more: "More", inbox: "Inbox", importCsv: "Import CSV", importLeads: "Import leads", mapColumns: "Map columns", pasteCsv: "Paste CSV (first row = headers) or choose a file", imported: "imported", skipped: "skipped (duplicate / on suppression list)", column: "Column", ignore: "— ignore —", startImport: "Start import", preview: "Preview", suppression: "Suppression list", suppressionDesc: "Hard block: addresses/domains here never receive emails, not even from sequences (checked fail-closed at send time).", addEmail: "Add email or domain…", reason: "Reason", impressum: "Email footer / Impressum", impressumDesc: "Attached automatically to every CRM email sent via Gmail (TMG §5 / GDPR). Supports {{firstName}}, {{company}}.", businessHours: "Sending window (local time)", businessHoursDesc: "Sequence emails are only sent within this window (recipient's local time is unknown – your time zone applies).", from: "From", to: "To", tracking: "Open / click tracking", trackingDesc: "Off by default (TDDDG §25). Only enable per-contact with a lawful basis. Applies as the default for the compose window.", trackingDefault: "Track new emails by default", gdpr: "Data & privacy", exportData: "Export data (Art. 15)", deleteCompany: "Delete company & all data (Art. 17)", deleteConfirm: "Permanently delete this company and every contact, note, activity, task, deal and email? This cannot be undone.", biBasis: "Lawful basis (berechtigtes Interesse)", biPlaceholder: "e.g. B2B, relevant service, existing business context…", compose: "Compose email", logEmailManual: "Log manually", sendViaGmail: "Send via Gmail", connectGmail: "Connect Google Workspace to send", followUpOnly: "Email is follow-up only — calls are the primary motion.", useTemplate: "Template", noTemplate: "— blank —", trackThis: "Track opens/clicks", send: "Send", sent: "Sent", newTemplate: "New template", templateName: "Template name", subjectLine: "Subject", emailBody: "Body", category: "Category", saveTemplate: "Save template", noTemplates: "No templates yet.", newSequence: "New sequence", sequenceName: "Sequence name", steps: "Steps", addStep: "Add step", waitDays: "Wait (days)", stepEmail: "Email", stepCall: "Call task", stepLinkedin: "LinkedIn task", stepWait: "Wait", enroll: "Enroll", enrolled: "Enrolled", active: "Active", paused: "Paused", completed: "Completed", pause: "Pause", resume: "Resume", enrollments: "Enrollments", abTest: "A/B subject", variantB: "Variant B subject", repCalls: "Calls", repConnects: "Connects", repMeetings: "Meetings booked", repConnectRate: "Connect rate", repEmails: "Emails sent", repReplies: "Replies", repPipeline: "Open pipeline", repWon: "Won", repTemplatePerf: "Template performance", opened: "Opened", clicked: "Clicked", replied: "Replied", openRate: "Open %", replyRate: "Reply %", noData: "No data in this range.", range: "Range", r7: "7 days", r30: "30 days", r90: "90 days", integrations: "Integrations", notConnected: "Not connected", connected2: "Connected", setupRequired: "Owner setup required", tabOverview: "Overview", emails: "Emails", yesterday: "Yesterday", recentActivity: "Recent activity", viewAll: "View all", filterAll: "All", filterCalls: "Calls", filterMeetings: "Meetings", filterLinkedin: "LinkedIn", actEmailSent: "Email sent", actEmailReceived: "Email received", actCallLogged: "Call logged", actLinkedinLogged: "LinkedIn logged", actMeetingLogged: "Meeting logged", actNoteTitle: "Note", writeEmail: "Write email", gmailNotConnectedHint: "Gmail not connected – email will only be logged", noEmailsHist: "No emails yet. Write the first one – or log a past email via 'Log email' above.", needContactEmail: "Add a contact with an email address first.", templatePlaceholderHint: "{{firstName}}, {{company}} are replaced when sending", trackThisHint: "Only enable with a lawful basis (TDDDG §25).", openMailApp: "Open in mail app + log", logOnly: "Log only", outbound: "Outbound", inbound: "Inbound", suppressedMsg: "Contact is on the suppression list or has unsubscribed.", sendErrorGeneric: "Failed to send.", logged: "Logged.", templatesDesc: "Available in the compose window and in sequences. Placeholders: {{firstName}}, {{lastName}}, {{company}}.", gmailConnectedDesc: "Sends & tracks as", notSetUp: "Not set up", calNotSetupDesc: "Calendar sync is prepared but not yet enabled.", calConnectedDesc: "Syncs your calendar: meetings with CRM contacts appear on the company.", fromAccount: "From", slackDesc: "Posts new tasks & replies into the CRM channel.", gmailStep1: "Create a Google Cloud service account with domain-wide delegation for the Gmail scope.", gmailStep2: "Store the JSON key as the GOOGLE_SA_KEY secret in Supabase.", gmailStep3: "Set CRM_SDR_EMAIL.", gmailSetupDocsRef: "Full instructions: docs/CRM-GOOGLE-SETUP.md in the repo.", }, de: { crm: "CRM", today: "Heute", companies: "Firmen", pipeline: "Pipeline", search: "Firmen suchen…", newCompany: "Neue Firma", newContact: "Neuer Kontakt", name: "Name", website: "Website / Domain", industry: "Branche", status: "Status", leadSource: "Lead-Quelle", save: "Speichern", cancel: "Abbrechen", create: "Anlegen", add: "Hinzufügen", edit: "Bearbeiten", remove: "Entfernen", delete: "Löschen", contacts: "Kontakte", activity: "Aktivität", notes: "Notizen", tasks: "Aufgaben", deal: "Deal", nextStep: "Nächster Schritt", addNextStep: "Nächsten Schritt eintragen…", noContacts: "Noch keine Kontakte.", noActivity: "Noch keine Aktivität.", noNotes: "Noch keine Notizen.", noTasks: "Keine offenen Aufgaben.", logCall: "Anruf loggen", logEmail: "E-Mail loggen", logLinkedin: "LinkedIn loggen", logMeeting: "Termin loggen", outcome: "Ergebnis", connected: "Erreicht", noAnswer: "Nicht erreicht", voicemail: "Mailbox", meetingBooked: "Termin vereinbart", notInterested: "Kein Interesse", callback: "Rückruf", addNote: "Notiz schreiben…", addTask: "Wiedervorlage hinzufügen…", due: "Fällig", call: "Anruf", email: "E-Mail", general: "Allgemein", open: "Offen", markDone: "Erledigt", firstName: "Vorname", lastName: "Nachname", role: "Rolle", phone: "Telefon", primary: "Primär", dnc: "Nicht kontaktieren", followUp: "Wiedervorlage", noCompanies: "Noch keine Firmen — leg die erste an.", quickAdd: "Schnell anlegen", value: "Wert", stage: "Phase", won: "Gewonnen", lost: "Verloren", createDeal: "Deal anlegen", noDeal: "Noch kein Deal.", overdue: "Überfällig", dueToday: "Heute fällig", upcoming: "Demnächst", allCaughtUp: "Alles erledigt 🎉", back: "Zurück", statusNew: "Neu", statusWorking: "In Bearbeitung", statusQualified: "Qualifiziert", statusCustomer: "Kunde", statusLost: "Verloren", statusDnc: "Nicht kontaktieren", fetchLogo: "Logo holen", freemailWarn: "Sieht nach privater E-Mail aus — als Nicht-Business markieren?", inDocs: "In Docs erwähnt", links: "Verknüpfungen", linkBoard: "Board", linkDocs: "Docs", asClient: "Als Kunde anlegen (Board + Docs)", linkMissing: "Fehlende Verknüpfung anlegen", reports: "Berichte", settings: "Einstellungen", sequences: "Sequenzen", templates: "Vorlagen", more: "Mehr", inbox: "Eingang", importCsv: "CSV importieren", importLeads: "Leads importieren", mapColumns: "Spalten zuordnen", pasteCsv: "CSV einfügen (erste Zeile = Überschriften) oder Datei wählen", imported: "importiert", skipped: "übersprungen (Duplikat / auf Sperrliste)", column: "Spalte", ignore: "— ignorieren —", startImport: "Import starten", preview: "Vorschau", suppression: "Sperrliste", suppressionDesc: "Harte Sperre: Adressen/Domains hier erhalten nie E-Mails, auch nicht aus Sequenzen (fail-closed geprüft beim Versand).", addEmail: "E-Mail oder Domain hinzufügen…", reason: "Grund", impressum: "E-Mail-Signatur / Impressum", impressumDesc: "Wird automatisch an jede über Gmail versendete CRM-E-Mail angehängt (TMG §5 / DSGVO). Unterstützt {{firstName}}, {{company}}.", businessHours: "Sendefenster (Ortszeit)", businessHoursDesc: "Sequenz-Mails werden nur innerhalb dieses Fensters verschickt (Ortszeit des Empfängers unbekannt – es gilt eure Zeit).", from: "Von", to: "Bis", tracking: "Öffnungs-/Klick-Tracking", trackingDesc: "Standardmäßig aus (TDDDG §25). Nur pro Kontakt mit Rechtsgrundlage aktivieren. Gilt als Voreinstellung für das Compose-Fenster.", trackingDefault: "Neue E-Mails standardmäßig tracken", gdpr: "Daten & Datenschutz", exportData: "Daten exportieren (Art. 15)", deleteCompany: "Firma & alle Daten löschen (Art. 17)", deleteConfirm: "Diese Firma und jeden Kontakt, Notiz, Aktivität, Aufgabe, Deal und E-Mail endgültig löschen? Nicht rückgängig zu machen.", biBasis: "Rechtsgrundlage (berechtigtes Interesse)", biPlaceholder: "z. B. B2B, passende Leistung, bestehender Geschäftskontext…", compose: "E-Mail verfassen", logEmailManual: "Manuell loggen", sendViaGmail: "Über Gmail senden", connectGmail: "Google Workspace verbinden zum Senden", followUpOnly: "E-Mail dient nur zum Nachfassen — Anrufe sind der Hauptkanal.", useTemplate: "Vorlage", noTemplate: "— leer —", trackThis: "Öffnungen/Klicks tracken", send: "Senden", sent: "Gesendet", newTemplate: "Neue Vorlage", templateName: "Vorlagenname", subjectLine: "Betreff", emailBody: "Text", category: "Kategorie", saveTemplate: "Vorlage speichern", noTemplates: "Noch keine Vorlagen.", newSequence: "Neue Sequenz", sequenceName: "Sequenzname", steps: "Schritte", addStep: "Schritt hinzufügen", waitDays: "Warten (Tage)", stepEmail: "E-Mail", stepCall: "Anruf-Aufgabe", stepLinkedin: "LinkedIn-Aufgabe", stepWait: "Warten", enroll: "Aufnehmen", enrolled: "Aufgenommen", active: "Aktiv", paused: "Pausiert", completed: "Abgeschlossen", pause: "Pausieren", resume: "Fortsetzen", enrollments: "Aufnahmen", abTest: "A/B-Betreff", variantB: "Variante-B-Betreff", repCalls: "Anrufe", repConnects: "Erreicht", repMeetings: "Termine vereinbart", repConnectRate: "Erreichbarkeit", repEmails: "E-Mails gesendet", repReplies: "Antworten", repPipeline: "Offene Pipeline", repWon: "Gewonnen", repTemplatePerf: "Vorlagen-Performance", opened: "Geöffnet", clicked: "Geklickt", replied: "Beantwortet", openRate: "Öffnung %", replyRate: "Antwort %", noData: "Keine Daten in diesem Zeitraum.", range: "Zeitraum", r7: "7 Tage", r30: "30 Tage", r90: "90 Tage", integrations: "Integrationen", notConnected: "Nicht verbunden", connected2: "Verbunden", setupRequired: "Einrichtung durch Owner nötig", tabOverview: "Übersicht", emails: "E-Mails", yesterday: "Gestern", recentActivity: "Letzte Aktivität", viewAll: "Alle anzeigen", filterAll: "Alle", filterCalls: "Anrufe", filterMeetings: "Termine", filterLinkedin: "LinkedIn", actEmailSent: "E-Mail gesendet", actEmailReceived: "E-Mail erhalten", actCallLogged: "Anruf geloggt", actLinkedinLogged: "LinkedIn geloggt", actMeetingLogged: "Termin geloggt", actNoteTitle: "Notiz", writeEmail: "E-Mail schreiben", gmailNotConnectedHint: "Gmail nicht verbunden – E-Mail wird nur geloggt", noEmailsHist: "Noch keine E-Mails. Schreib die erste – oder logge eine vergangene E-Mail über 'E-Mail loggen' oben.", needContactEmail: "Lege zuerst einen Kontakt mit E-Mail-Adresse an.", templatePlaceholderHint: "{{firstName}}, {{company}} werden beim Senden ersetzt", trackThisHint: "Nur mit Rechtsgrundlage aktivieren (TDDDG §25).", openMailApp: "In Mail-App öffnen + loggen", logOnly: "Nur loggen", outbound: "Ausgehend", inbound: "Eingehend", suppressedMsg: "Kontakt steht auf der Sperrliste oder hat abgemeldet.", sendErrorGeneric: "Senden fehlgeschlagen.", logged: "Geloggt.", templatesDesc: "Stehen im Compose-Fenster und in Sequenzen zur Verfügung. Platzhalter: {{firstName}}, {{lastName}}, {{company}}.", gmailConnectedDesc: "Sendet & trackt als", notSetUp: "Nicht eingerichtet", calNotSetupDesc: "Kalender-Sync ist vorbereitet, aber noch nicht aktiviert.", calConnectedDesc: "Synct deinen Kalender: Meetings mit CRM-Kontakten erscheinen beim Unternehmen.", fromAccount: "Von", slackDesc: "Postet neue Tasks & Antworten in den CRM-Channel.", gmailStep1: "Google-Cloud-Service-Account mit domainweiter Delegierung für den Gmail-Scope anlegen.", gmailStep2: "JSON-Key als Secret GOOGLE_SA_KEY in Supabase hinterlegen.", gmailStep3: "CRM_SDR_EMAIL setzen.", gmailSetupDocsRef: "Ausführliche Anleitung: docs/CRM-GOOGLE-SETUP.md im Repo.", }, }; const CrmI18n = React.createContext({ lang: "de", t: (k) => k, setLang: () => {} }); function useT() { return React.useContext(CrmI18n); } const CO_COLORS = ["#5A58E7", "#3490EB", "#7D50CA", "#1FA36B", "#E0792B", "#C2410C", "#9A7B0A", "#E5484D"]; function coColor(s) { let h = 0; for (let i = 0; i < (s || "").length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return CO_COLORS[h % CO_COLORS.length]; } function coInitials(name) { const s = (name || "").trim(); if (!s) return "?"; const p = s.split(/[\s\-_/.]+/).filter(Boolean); if (p.length >= 2) return (p[0][0] + p[1][0]).toUpperCase(); return s.length <= 3 ? s.toUpperCase() : s.slice(0, 2).toUpperCase(); } function CoAvatar({ company, size = 32 }) { if (!company) return null; const r = Math.max(4, Math.round(size * 0.28)); if (company.logoUrl) return ; const init = coInitials(company.name); return = 3 ? 0.34 : 0.42)), fontWeight: 700, fontFamily: "var(--font-display)", flex: "0 0 auto", userSelect: "none", lineHeight: 1 }}>{init}; } const FREEMAIL = /@(gmail|googlemail|web|gmx|yahoo|hotmail|outlook|icloud|t-online|freenet|aol|mail|proton|protonmail)\.[a-z.]+$/i; const domainFromEmail = (e) => { const m = (e || "").match(/@([^\s@]+)$/); return m ? m[1].toLowerCase() : ""; }; const domainFromUrl = (u) => (u || "").trim().toLowerCase().replace(/^[a-z]+:\/\//, "").replace(/^www\./, "").replace(/\/.*$/, "").replace(/:\d+$/, ""); const CRM_STATUSES = ["new", "working", "qualified", "customer", "lost", "dnc"]; const statusColor = (s) => ({ new: "#7F89A2", working: "#3490EB", qualified: "#5A58E7", customer: "#1FA36B", lost: "#E5484D", dnc: "#9A5B1B" }[s] || "#7F89A2"); const OUTCOMES = ["connected", "noAnswer", "voicemail", "meetingBooked", "notInterested", "callback"]; function crmFmtDate(d) { if (!d) return ""; try { return new Date(d).toLocaleDateString("en-GB", { day: "numeric", month: "short" }); } catch (_) { return ""; } } function crmRel(iso) { if (!iso) return ""; const s = Math.round((Date.now() - new Date(iso).getTime()) / 1000); if (s < 60) return "just now"; const m = Math.round(s / 60); if (m < 60) return m + "m"; const h = Math.round(m / 60); if (h < 24) return h + "h"; const d = Math.round(h / 24); if (d < 7) return d + "d"; return crmFmtDate(iso); } /* day/month grouping for the activity timeline + email history (pattern: Docs activity log) */ function crmDayKey(iso) { const d = new Date(iso); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate(); } function crmDayLabel(iso, lang, t) { const d = new Date(iso), now = new Date(); const startOf = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime(); const diff = Math.round((startOf(now) - startOf(d)) / 864e5); if (diff === 0) return t("today"); if (diff === 1) return t("yesterday"); try { return d.toLocaleDateString(lang === "de" ? "de-DE" : "en-US", { day: "numeric", month: "long", year: "numeric" }); } catch (_) { return ""; } } function crmMonthKey(iso) { const d = new Date(iso); return d.getFullYear() + "-" + d.getMonth(); } function crmMonthLabel(iso, lang) { try { return new Date(iso).toLocaleDateString(lang === "de" ? "de-DE" : "en-US", { month: "long", year: "numeric" }); } catch (_) { return ""; } } /* ---- root CRM app ---- */ function CrmApp({ user, onHome, path, navigate }) { const [lang, setLangState] = useState(() => { try { return localStorage.getItem("mesper.lang") || "de"; } catch (_) { return "de"; } }); const setLang = (l) => { setLangState(l); try { localStorage.setItem("mesper.lang", l); localStorage.setItem("mesper.docsLang", l); localStorage.setItem("mesper.crmLang", l); } catch (_) {} }; const t = (k) => (CRM_DICT[lang] && CRM_DICT[lang][k]) || CRM_DICT.en[k] || k; const narrow = typeof useIsNarrow === "function" ? useIsNarrow(760) : false; // route parsing: /crm , /crm/companies , /crm/c/ , /crm/pipeline , /crm/today , /crm/sequences[/] , /crm/reports , /crm/settings , /crm/more const sub = (path || "").replace(/^\/crm\/?/, ""); let view = "today", companyId = null, seqId = null; if (sub === "" || sub === "today") view = "today"; else if (sub === "companies") view = "companies"; else if (sub === "pipeline") view = "pipeline"; else if (sub === "reports") view = "reports"; else if (sub === "settings") view = "settings"; else if (sub === "more") view = "more"; else if (sub.startsWith("sequences/")) { view = "sequence"; seqId = sub.slice(10); } else if (sub === "sequences") view = "sequences"; else if (sub.startsWith("c/")) { view = "company"; companyId = sub.slice(2); } else view = "today"; const primaryNav = [ { id: "today", icon: "clock", label: t("today"), to: "/crm/today" }, { id: "companies", icon: "inbox", label: t("companies"), to: "/crm/companies" }, { id: "pipeline", icon: "chart", label: t("pipeline"), to: "/crm/pipeline" }, ]; const secondaryNav = [ { id: "sequences", icon: "repeat", label: t("sequences"), to: "/crm/sequences" }, { id: "reports", icon: "chart", label: t("reports"), to: "/crm/reports" }, { id: "settings", icon: "settings", label: t("settings"), to: "/crm/settings" }, ]; const activeNav = view === "company" ? "companies" : view === "sequence" ? "sequences" : view; const header = (
{["de", "en"].map((l) => ( ))}
{typeof NotificationBell === "function" && } MesperDB.signOut()} />
); const navItem = (n) => ( ); const sidebar = !narrow && ( ); const mobileNav = [...primaryNav, { id: "more", icon: "menu", label: t("more"), to: "/crm/more" }]; const bottomNav = narrow && ( ); return (
{header}
{sidebar}
{view === "today" && } {view === "companies" && } {view === "pipeline" && } {view === "company" && } {view === "sequences" && } {view === "sequence" && } {view === "reports" && } {view === "settings" && } {view === "more" && }
{bottomNav}
); } /* ---- Companies list + quick add ---- */ function CrmCompanies({ navigate }) { const { t } = useT(); const [companies, setCompanies] = useState(null); const [q, setQ] = useState(""); const [filter, setFilter] = useState("all"); const [adding, setAdding] = useState(false); const [importing, setImporting] = useState(false); function reload() { MesperDB.crmListCompanies().then(setCompanies).catch(() => setCompanies([])); } useEffect(() => { reload(); }, []); const VIEWS = [["all", t("companies")], ["new", t("statusNew")], ["working", t("statusWorking")], ["qualified", t("statusQualified")], ["customer", t("statusCustomer")]]; const list = (companies || []) .filter((c) => filter === "all" || c.status === filter) .filter((c) => !q.trim() || (c.name + " " + c.domain + " " + c.industry).toLowerCase().includes(q.trim().toLowerCase())); return (

{t("companies")} {companies && {companies.length}}

setQ(e.target.value)} placeholder={t("search")} style={{ ...(typeof selectStyle !== "undefined" ? selectStyle : {}), maxWidth: 220, flex: "1 1 160px" }} />
{/* smart views */}
{VIEWS.map(([v, lbl]) => { const n = v === "all" ? (companies || []).length : (companies || []).filter((c) => c.status === v).length; return ; })}
{companies === null &&
…
} {companies && list.length === 0 &&
{q ? "—" : t("noCompanies")}
}
{list.map((c) => ( ))}
{adding && setAdding(false)} onSaved={(c) => { setAdding(false); navigate("/crm/c/" + c.id); }} />} {importing && setImporting(false)} onDone={reload} />}
); } function CrmCompanyModal({ onClose, onSaved, company }) { const { t } = useT(); const editing = !!company; const [name, setName] = useState(company?.name || ""); const [website, setWebsite] = useState(company?.website || company?.domain || ""); const [industry, setIndustry] = useState(company?.industry || ""); const [status, setStatus] = useState(company?.status || "new"); const [leadSource, setLeadSource] = useState(company?.leadSource || ""); const [busy, setBusy] = useState(false); const ss = typeof selectStyle !== "undefined" ? selectStyle : { width: "100%", padding: "9px 12px", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 15 }; async function save() { if (!name.trim() || busy) return; setBusy(true); const domain = domainFromUrl(website); const payload = { name: name.trim(), website: website.trim(), domain, industry: industry.trim(), status, leadSource: leadSource.trim() }; try { const c = editing ? await MesperDB.crmUpdateCompany(company.id, payload) : await MesperDB.crmCreateCompany(payload); // auto-logo from domain (non-blocking) if (domain && !c.logoUrl && MesperDB.fetchLogo) { MesperDB.fetchLogo(domain).then((r) => { if (r && r.ok && r.dataUrl) MesperDB.crmUpdateCompany(c.id, { logoUrl: r.dataUrl }).catch(() => {}); }).catch(() => {}); } onSaved(c); } catch (e) { setBusy(false); } } return (

{editing ? t("edit") : t("newCompany")}

{t("name")}
setName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") save(); }} style={{ ...ss, fontWeight: 600 }} placeholder="Acme GmbH" />
{t("website")}
setWebsite(e.target.value)} style={ss} placeholder="acme.de" />
{t("industry")}
setIndustry(e.target.value)} style={ss} />
{t("leadSource")}
setLeadSource(e.target.value)} style={ss} placeholder="LinkedIn / Referral…" />
{t("status")}
{CRM_STATUSES.map((s) => )}
); } function fieldLabelC() { return { fontSize: 12.5, fontWeight: 600, color: "var(--ink-3)", marginBottom: 6 }; } /* ---- Today / needs-attention (open tasks) ---- */ function CrmToday({ navigate }) { const { t } = useT(); const [tasks, setTasks] = useState(null); function reload() { MesperDB.crmListOpenTasks().then(setTasks).catch(() => setTasks([])); } useEffect(() => { reload(); }, []); async function done(task) { try { await MesperDB.crmUpdateTask(task.id, { status: "done" }); reload(); } catch (e) {} } const now = Date.now(); const groups = { overdue: [], dueToday: [], upcoming: [] }; const todayEnd = new Date(); todayEnd.setHours(23, 59, 59, 999); (tasks || []).forEach((t2) => { if (!t2.dueAt) { groups.upcoming.push(t2); return; } const d = new Date(t2.dueAt).getTime(); if (d < now && new Date(t2.dueAt) < new Date(new Date().setHours(0, 0, 0, 0))) groups.overdue.push(t2); else if (d <= todayEnd.getTime()) groups.dueToday.push(t2); else groups.upcoming.push(t2); }); return (

{t("today")}

{tasks === null &&
…
} {tasks && tasks.length === 0 &&
{t("allCaughtUp")}
} {[["overdue", "var(--st-declined)"], ["dueToday", "var(--st-pending)"], ["upcoming", "var(--ink-4)"]].map(([g, col]) => groups[g].length > 0 && (
{t(g)} · {groups[g].length}
{groups[g].map((tk) => (
))}
))}
); } /* ---- Pipeline (Kanban, read + drag-to-move) ---- */ function CrmPipeline({ navigate }) { const { t } = useT(); const narrow = typeof useIsNarrow === "function" ? useIsNarrow(760) : false; const [stages, setStages] = useState([]); const [opps, setOpps] = useState(null); const [drag, setDrag] = useState(null); // {id} const [over, setOver] = useState(null); // stageId function reload() { Promise.all([MesperDB.crmListStages(), MesperDB.crmListOpportunities()]).then(([s, o]) => { setStages(s); setOpps(o); }).catch(() => setOpps([])); } useEffect(() => { reload(); }, []); async function moveTo(oppId, stage) { setOpps((cur) => cur.map((o) => o.id === oppId ? { ...o, stageId: stage.id, status: stage.isWon ? "won" : stage.isLost ? "lost" : "open" } : o)); setDrag(null); setOver(null); try { await MesperDB.crmUpdateOpportunity(oppId, { stageId: stage.id, ...(stage.isWon ? { status: "won" } : stage.isLost ? { status: "lost" } : { status: "open" }) }); } catch (e) { reload(); } } return (

{t("pipeline")}

{!narrow && opps && {t("stage")} · drag & drop}
{opps === null ?
…
: (
{stages.map((st) => { const items = opps.filter((o) => o.stageId === st.id && (st.isWon ? o.status === "won" : st.isLost ? o.status === "lost" : o.status === "open")); const sum = items.reduce((a, o) => a + (o.value || 0), 0); const isOver = over === st.id; return (
{ if (drag) { e.preventDefault(); setOver(st.id); } }} onDragLeave={() => setOver((v) => v === st.id ? null : v)} onDrop={(e) => { e.preventDefault(); if (drag) moveTo(drag.id, st); }} style={{ flex: "0 0 240px", minWidth: 240, background: isOver ? "var(--accent-soft)" : "var(--surface-2)", border: `1px solid ${isOver ? "var(--accent)" : "var(--line)"}`, borderRadius: "var(--r-lg)", padding: 10, display: "flex", flexDirection: "column", gap: 8, transition: "background .12s, border-color .12s" }}>
{st.name} {items.length}
{sum > 0 && €{Math.round(sum / 1000)}k}
{items.map((o) => (
{ setDrag({ id: o.id }); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", o.id); } catch (_) {} }} onDragEnd={() => { setDrag(null); setOver(null); }} onClick={() => o.companyId && navigate("/crm/c/" + o.companyId)} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--r-md)", padding: "10px 12px", cursor: "grab", boxShadow: "var(--sh-sm)", opacity: drag && drag.id === o.id ? 0.4 : 1 }}>
{o.companyName}
{o.title &&
{o.title}
} {o.value > 0 &&
€{o.value.toLocaleString("de-DE")}
}
))}
); })}
)}
); } /* ---- Company detail ---- */ function CrmCompanyDetail({ id, user, navigate }) { const { t } = useT(); const [data, setData] = useState(null); const [emails, setEmails] = useState(null); const [gmail, setGmail] = useState({ configured: false, calendar: false, account: "" }); const [tab, setTab] = useState("overview"); const [editing, setEditing] = useState(false); const [composeMode, setComposeMode] = useState(null); // null (closed) | "auto" | "log" const [nextStep, setNextStep] = useState(""); const [editNext, setEditNext] = useState(false); const ss = typeof selectStyle !== "undefined" ? selectStyle : { width: "100%", padding: "9px 12px", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 14 }; function reload() { MesperDB.crmGetCompany(id).then((d) => { setData(d); setNextStep(d.company.nextStep || ""); }).catch(() => setData(false)); MesperDB.crmListEmails(id).then(setEmails).catch(() => setEmails([])); } useEffect(() => { reload(); }, [id]); useEffect(() => { MesperDB.crmGmailStatus().then(setGmail).catch(() => {}); }, []); if (data === null) return
…
; if (data === false) return
—
; const c = data.company; async function saveNext() { setEditNext(false); try { await MesperDB.crmUpdateCompany(id, { nextStep: nextStep.trim() }); } catch (e) {} } async function setStatus(s) { setData((d) => ({ ...d, company: { ...d.company, status: s } })); try { await MesperDB.crmUpdateCompany(id, { status: s }); } catch (e) {} } const TABS = [ ["overview", t("tabOverview"), null], ["activity", t("activity"), null], ["emails", t("emails"), emails ? emails.length : null], ["contacts", t("contacts"), data.contacts.length], ]; return (
{/* header */}

{c.name}

{c.website && {c.domain || c.website}} {c.industry && {c.industry}} {c.leadSource && · {c.leadSource}}
{CRM_STATUSES.map((s) => )}
{/* next step */}
{editNext ? ( setNextStep(e.target.value)} onBlur={saveNext} onKeyDown={(e) => { if (e.key === "Enter") saveNext(); }} placeholder={t("addNextStep")} style={{ ...ss, flex: 1, border: "1px solid var(--accent)", background: "var(--surface)" }} /> ) : (
setEditNext(true)} style={{ flex: 1, cursor: "text", fontWeight: 600, fontSize: 14, color: nextStep ? "var(--accent-ink)" : "var(--ink-4)" }}>{nextStep || t("addNextStep")}
)}
setComposeMode("log")} /> {/* tab bar (segmented control, Tasks-Stil) */}
{TABS.map(([tid, label, count]) => { const on = tab === tid; return ( ); })}
{tab === "overview" && (
setTab("activity")} /> navigate("/crm/companies")} />
)} {tab === "activity" && ( )} {tab === "emails" && ( setComposeMode("auto")} /> )} {tab === "contacts" && ( )} {editing && setEditing(false)} onSaved={() => { setEditing(false); reload(); }} />} {composeMode && ( setComposeMode(null)} onSent={() => { setComposeMode(null); reload(); }} /> )}
); } /* client-links: Board/Docs cross-links + one-click customer provisioning */ function CompanyLinksCard({ companyId, navigate }) { const { t } = useT(); const [links, setLinks] = useState(null); const [busy, setBusy] = useState(false); function reload() { MesperDB.clientLinks({ companyId }).then(setLinks).catch(() => setLinks(false)); } useEffect(() => { reload(); }, [companyId]); if (links === null || links === false) return null; const hasBoard = !!links.projectId; const hasDocs = !!links.spaceId; async function provision() { setBusy(true); try { await MesperDB.clientProvisionFromCompany(companyId); } catch (e) {} setBusy(false); reload(); } return (
{hasBoard && ( )} {hasDocs && ( )} {(!hasBoard || !hasDocs) && ( )}
); } function crmLinkChip() { return { display: "inline-flex", alignItems: "center", gap: 5, border: "1px solid var(--line-2)", background: "var(--surface)", borderRadius: "var(--r-pill)", padding: "5px 11px", fontSize: 12, fontWeight: 600, color: "var(--ink-2)", cursor: "pointer" }; } /* reverse cross-link: docs that @mention this company (Docs ↔ CRM) */ function CrmDocMentions({ companyId, navigate }) { const { t } = useT(); const [docs, setDocs] = useState(null); useEffect(() => { if (MesperDB.docsListBacklinks) MesperDB.docsListBacklinks("crm_company", companyId).then(setDocs).catch(() => setDocs([])); else setDocs([]); }, [companyId]); if (!docs || docs.length === 0) return null; return (
{docs.map((d) => ( ))}
); } /* compliance per-company (#12): berechtigtes Interesse doc + Art.15 export + Art.17 delete */ function CrmComplianceBox({ company, onChange, onDeleted }) { const { t } = useT(); const [bi, setBi] = useState(company.biBasis || ""); const [busy, setBusy] = useState(false); async function saveBi() { if (bi === (company.biBasis || "")) return; try { await MesperDB.crmUpdateCompany(company.id, { biBasis: bi }); } catch (e) {} onChange(); } async function exportData() { setBusy(true); try { const dump = await MesperDB.crmExportCompany(company.id); const blob = new Blob([JSON.stringify(dump, null, 2)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "crm-" + (company.domain || company.name || company.id).replace(/[^a-z0-9]+/gi, "-").toLowerCase() + ".json"; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); } catch (e) {} setBusy(false); } async function del() { if (!window.confirm(t("deleteConfirm"))) return; try { await MesperDB.crmDeleteCompany(company.id); } catch (e) {} onDeleted(); } const ss = typeof selectStyle !== "undefined" ? selectStyle : { width: "100%", padding: "8px 10px", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 13.5 }; return (
{t("biBasis")}
setBi(e.target.value)} onBlur={saveBi} placeholder={t("biPlaceholder")} style={ss} />
); } /* quick log bar: call disposition (+ auto follow-up), email (compose), linkedin, meeting */ function CrmLogBar({ companyId, contacts, onLogged, onLogEmail }) { const { t } = useT(); const [open, setOpen] = useState(null); // 'call' | null const primary = contacts.find((x) => x.isPrimary) || contacts[0] || null; async function log(type, outcome) { try { await MesperDB.crmLogActivity({ companyId, contactId: primary ? primary.id : null, type, direction: "outbound", outcome: outcome || null }); if (type === "call" && (outcome === "noAnswer" || outcome === "callback")) { const due = new Date(Date.now() + 24 * 3600 * 1000); await MesperDB.crmCreateTask({ companyId, contactId: primary ? primary.id : null, title: t("followUp") + (primary ? " · " + (primary.first || "") : ""), kind: "call", dueAt: due.toISOString() }); } } catch (e) {} setOpen(null); onLogged(); } const btn = { display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 13px", border: "1px solid var(--line-2)", borderRadius: "var(--r-sm)", background: "var(--surface)", cursor: "pointer", fontWeight: 600, fontSize: 13, color: "var(--ink-2)" }; return (
{primary && primary.phone && 📞 {primary.phone}}
{open === "call" && (
{t("outcome")}: {OUTCOMES.map((o) => )}
)}
); } /* compose / send / log an email – three modes: send (Gmail), mailto (Gmail not connected: open mail app + log), log (log only, e.g. to backfill a past email). Gmail send is owner-gated (crmGmailStatus); manual logging always works. */ function CrmComposeModal({ company, contacts, onClose, onSent, gmailConfigured, gmailAccount, initialMode }) { const { t } = useT(); const bizContacts = (contacts || []).filter((c) => c.email); const primary = bizContacts.find((x) => x.isPrimary) || bizContacts[0] || null; const [contactId, setContactId] = useState(primary ? primary.id : ""); const [templates, setTemplates] = useState([]); const [settings, setSettings] = useState(null); const [templateId, setTemplateId] = useState(""); const [subject, setSubject] = useState(""); const [body, setBody] = useState(""); const [track, setTrack] = useState(false); const [direction, setDirection] = useState("outbound"); const [mode, setMode] = useState(initialMode === "log" ? "log" : (gmailConfigured ? "send" : "mailto")); const [busy, setBusy] = useState(false); const [note, setNote] = useState(""); const ss = typeof selectStyle !== "undefined" ? selectStyle : { width: "100%", padding: "9px 12px", border: "1px solid var(--line-2)", borderRadius: 8, fontSize: 14 }; useEffect(() => { MesperDB.crmListTemplates().then(setTemplates).catch(() => {}); MesperDB.crmGetSettings().then((s) => { setSettings(s); setTrack(!!s.defaultTracking); }).catch(() => setSettings({})); }, []); const contact = bizContacts.find((c) => c.id === contactId) || primary; if (bizContacts.length === 0) { return (

{t("compose")}

{t("needContactEmail")}
 ); } const merge = (s) => (s || "").replace(/\{\{\s*firstName\s*\}\}/gi, contact?.first || "").replace(/\{\{\s*company\s*\}\}/gi, company.name || "").replace(/\{\{\s*lastName\s*\}\}/gi, contact?.last || ""); function applyTemplate(id) { setTemplateId(id); const tp = templates.find((x) => x.id === id); if (tp) { setSubject(tp.subject || ""); setBody(tp.body || ""); } } function finish(successKey) { setNote(successKey); setBusy(false); setTimeout(() => onSent(), 900); } async function sendIt() { if (busy || !contact) return; setBusy(true); setNote(""); const res = await MesperDB.crmGmailSend({ companyId: company.id, contactId: contact.id, subject, body, templateId: templateId || null, trackingEnabled: track }); if (res && res.ok) { finish("sent"); return; } setBusy(false); const reason = res && res.reason; setNote(reason === "suppressed" ? "suppressed" : reason === "not_connected" ? "notConnected" : "genericErr"); } async function mailtoIt() { if (busy || !contact) return; setBusy(true); setNote(""); const subj = merge(subject), bod = merge(body); try { window.open(`mailto:${contact.email}?subject=${encodeURIComponent(subj)}&body=${encodeURIComponent(bod)}`, "_blank"); await MesperDB.crmLogEmail({ companyId: company.id, contactId: contact.id, direction: "outbound", subject: subj, body: bod, templateId: templateId || null, trackingEnabled: track }); finish("logged"); } catch (e) { setBusy(false); setNote("genericErr"); } } async function logOnlyIt() { if (busy || !contact) return; setBusy(true); setNote(""); const subj = merge(subject), bod = merge(body); try { await MesperDB.crmLogEmail({ companyId: company.id, contactId: contact.id, direction, subject: subj, body: bod, templateId: templateId || null, trackingEnabled: track }); finish("logged"); } catch (e) { setBusy(false); setNote("genericErr"); } } const footer = settings && settings.impressum ? merge(settings.impressum) : ""; const modeOptions = gmailConfigured ? [["send", t("send")], ["log", t("logOnly")]] : [["mailto", t("openMailApp")], ["log", t("logOnly")]]; return (

{t("compose")}

{!gmailConfigured &&
{t("gmailNotConnectedHint")}
}
{modeOptions.map(([mid, label]) => { const on = mode === mid; return ; })}
{mode === "log" && (
{[["outbound", t("outbound")], ["inbound", t("inbound")]].map(([did, label]) => ( ))}
)} {mode === "send" && gmailAccount &&
{t("fromAccount")}: {gmailAccount}
}
{t("contacts")}
{t("useTemplate")}
{t("templatePlaceholderHint")}
{t("subjectLine")}
setSubject(e.target.value)} style={ss} />
{t("emailBody")}