<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DTV Empty Property CRM</title> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> :root { --ink: #1a1a2e; --paper: #f5f0e8; --amber: #c8952a; --amber-light: #f0b93a; --navy: #16213e; --red: #c0392b; --green: #27ae60; --muted: #8a8070; --tier1: #3d7ab5; --tier2: #c8952a; --tier3: #c0392b; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'DM Sans', sans-serif; background: var(--ink); color: var(--paper); min-height: 100vh; display: flex; flex-direction: column; } /* ── HEADER ── */ .header { background: var(--navy); border-bottom: 2px solid var(--amber); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 3px; color: var(--amber); } .logo span { color: var(--paper); } .header-actions { display: flex; gap: 10px; align-items: center; } .btn { font-family: 'DM Mono', monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 1px; padding: 8px 16px; border: none; cursor: pointer; text-transform: uppercase; transition: all 0.15s; } .btn-primary { background: var(--amber); color: var(--ink); } .btn-primary:hover { background: var(--amber-light); } .btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.2); } .btn-ghost:hover { border-color: var(--amber); color: var(--amber); } .btn-danger { background: var(--red); color: white; } .btn-sm { padding: 5px 10px; font-size: 0.65rem; } /* ── VIEWS ── */ .view { display: none; flex: 1; flex-direction: column; } .view.active { display: flex; } /* ── ALL RECORDS PAGE ── */ .records-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .records-controls { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 14px 18px; flex-shrink: 0; } .search-wrap { position: relative; margin-bottom: 5px; } .search-box { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--paper); padding: 9px 12px 9px 30px; font-family: 'DM Mono', monospace; font-size: 0.75rem; outline: none; } .search-box::placeholder { color: var(--muted); } .search-box:focus { border-color: var(--amber); } .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8rem; pointer-events: none; } .search-hint { font-family: 'DM Mono', monospace; font-size: 0.58rem; color: var(--muted); margin-bottom: 9px; opacity: 0.7; } .filter-row { display: flex; gap: 4px; flex-wrap: wrap; } .filter-btn { padding: 4px 7px; font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; } .filter-btn.active { background: var(--amber); color: var(--ink); border-color: var(--amber); } .filter-btn:hover:not(.active) { border-color: var(--amber); color: var(--amber); } /* ── CARDS GRID ── */ .cards-wrap { flex: 1; overflow-y: auto; padding: 16px 18px; } .cards-wrap::-webkit-scrollbar { width: 4px; } .cards-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .property-card { padding: 13px 15px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.15s; } .property-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); } .property-card.t1 { border-left-color: var(--tier1); } .property-card.t2 { border-left-color: var(--tier2); } .property-card.t3 { border-left-color: var(--tier3); } .property-card.closed-card { opacity: 0.5; border-left-color: #4a4a4a !important; } .property-card.closed-card .card-addr { text-decoration: line-through; color: var(--muted); } .card-addr { font-family: 'DM Mono', monospace; font-size: 0.78rem; font-weight: 500; color: var(--paper); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-why { font-size: 0.7rem; color: var(--muted); margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; } .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tbadge { font-family: 'DM Mono', monospace; font-size: 0.57rem; letter-spacing: 0.6px; padding: 2px 5px; text-transform: uppercase; } .tbadge.b1 { background: rgba(61,122,181,0.15); color: #6ba3d6; border: 1px solid rgba(61,122,181,0.25); } .tbadge.b2 { background: rgba(200,149,42,0.15); color: var(--amber-light); border: 1px solid rgba(200,149,42,0.25); } .tbadge.b3 { background: rgba(192,57,43,0.15); color: #e74c3c; border: 1px solid rgba(192,57,43,0.25); } .tbadge.bd { background: rgba(155,89,182,0.15); color: #c39bd3; border: 1px solid rgba(155,89,182,0.25); } .sdots { display: flex; gap: 2px; } .sd { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.1); } .sd.on { background: var(--amber); } .natag { font-family: 'DM Mono', monospace; font-size: 0.57rem; color: var(--muted); } .natag.due { color: #e74c3c; font-weight: 700; } .closed-section-header { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 12px 0 6px; grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 4px; } .empty-s { text-align: center; padding: 60px 16px; color: var(--muted); font-size: 0.75rem; font-family: 'DM Mono', monospace; line-height: 1.7; grid-column: 1/-1; } /* ── PAGINATION ── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.07); background: var(--navy); flex-shrink: 0; } .page-btn { font-family: 'DM Mono', monospace; font-size: 0.65rem; padding: 5px 10px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; letter-spacing: 0.5px; } .page-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); } .page-btn.active { background: var(--amber); color: var(--ink); border-color: var(--amber); } .page-btn:disabled { opacity: 0.3; cursor: default; } .page-info { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--muted); padding: 0 8px; } /* ── RECORD DETAIL PAGE ── */ .record-page { flex: 1; overflow-y: auto; background: #111827; display: flex; flex-direction: column; } .record-page::-webkit-scrollbar { width: 4px; } .record-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } .record-back { display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; } .back-btn { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.8px; padding: 6px 14px; background: transparent; border: 1px solid rgba(255,255,255,0.18); color: var(--paper); cursor: pointer; text-transform: uppercase; transition: all 0.15s; } .back-btn:hover { border-color: var(--amber); color: var(--amber); } .record-addr-crumb { font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--muted); } .detail { padding: 22px; max-width: 880px; width: 100%; } /* ── ATTACHMENTS ── */ .attach-sec { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); padding: 15px; margin-bottom: 14px; } .attach-sec-t { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--amber); margin-bottom: 13px; padding-bottom: 7px; border-bottom: 1px solid rgba(200,149,42,0.16); } .attach-drop { border: 2px dashed rgba(255,255,255,0.12); padding: 18px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; } .attach-drop:hover, .attach-drop.drag-over { border-color: var(--amber); background: rgba(200,149,42,0.04); } .attach-drop-lbl { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--muted); line-height: 1.7; } .attach-drop-lbl strong { color: var(--amber-light); } .attach-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .attach-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .attach-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 8px 12px; } .attach-icon { font-size: 1.2rem; flex-shrink: 0; } .attach-name { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--paper); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-size { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: var(--muted); flex-shrink: 0; } .attach-actions { display: flex; gap: 5px; flex-shrink: 0; } .attach-btn { font-family: 'DM Mono', monospace; font-size: 0.58rem; padding: 2px 7px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; } .attach-btn:hover { border-color: var(--amber); color: var(--amber-light); } .attach-btn.del { border-color: rgba(192,57,43,0.3); color: #e74c3c; } .attach-btn.del:hover { background: rgba(192,57,43,0.15); } .attach-img-preview { max-width: 100%; max-height: 200px; display: block; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); } .attach-size-warn { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: #e74c3c; margin-top: 5px; } /* ── DETAIL STYLES (reused) ── */ .d-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.07); gap: 16px; } .d-addr { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 2px; color: var(--paper); line-height: 1; margin-bottom: 5px; } .d-why { font-size: 0.83rem; color: #b0a090; font-style: italic; margin-bottom: 7px; line-height: 1.4; } .d-badges { display: flex; gap: 6px; flex-wrap: wrap; } .pbadge { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.7px; text-transform: uppercase; padding: 2px 7px; border: 1px solid; } .pbadge.pp1 { border-color: #3d7ab5; color: #6ba3d6; background: rgba(61,122,181,0.08); } .pbadge.pp2 { border-color: var(--amber); color: var(--amber-light); background: rgba(200,149,42,0.08); } .pbadge.pp3 { border-color: #9b59b6; color: #c39bd3; background: rgba(155,89,182,0.08); } .pbadge.ppl { border-color: var(--green); color: #58d68d; background: rgba(39,174,96,0.08); } .pbadge.prv { border-color: var(--muted); color: var(--muted); background: rgba(138,128,112,0.08); } .pbadge.pot { border-color: #e67e22; color: #f0b429; background: rgba(230,126,34,0.08); } .score-blk { text-align: center; min-width: 110px; } .total-sc { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; color: var(--amber); letter-spacing: 2px; line-height: 1; } .sc-dots { display: flex; gap: 4px; justify-content: center; margin: 4px 0; } .scd { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.1); } .scd.on { background: var(--amber); } .sc-rec { font-family: 'DM Mono', monospace; font-size: 0.6rem; color: var(--muted); max-width: 130px; line-height: 1.4; } .na-panel { background: rgba(200,149,42,0.07); border: 1px solid rgba(200,149,42,0.2); padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .na-panel.ov { background: rgba(192,57,43,0.07); border-color: rgba(192,57,43,0.26); } .na-lbl { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 3px; } .na-panel.ov .na-lbl { color: #e74c3c; } .na-txt { font-size: 0.88rem; font-weight: 500; color: var(--paper); } .na-date { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--muted); margin-top: 2px; } .sec { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); padding: 15px; margin-bottom: 14px; } .sec-t { font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--amber); margin-bottom: 13px; padding-bottom: 7px; border-bottom: 1px solid rgba(200,149,42,0.16); } .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .fg { margin-bottom: 11px; } .fl { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: block; } .fi { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--paper); padding: 8px 10px; font-family: 'DM Sans', sans-serif; font-size: 0.83rem; outline: none; transition: border-color 0.15s; } .fi:focus { border-color: var(--amber); } .fi::placeholder { color: rgba(255,255,255,0.17); } textarea.fi { resize: vertical; min-height: 85px; font-family: 'DM Sans', sans-serif; line-height: 1.5; } select.fi { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8070'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } select.fi option { background: #1e2d4a; color: #f5f0e8; } .why-fi { border-color: rgba(200,149,42,0.3) !important; background: rgba(200,149,42,0.04) !important; } .why-fi:focus { border-color: var(--amber) !important; } .tag-row { display: flex; gap: 5px; flex-wrap: wrap; } .tag { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.4px; padding: 3px 9px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--muted); text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .tag.on { background: rgba(200,149,42,0.14); border-color: var(--amber); color: var(--amber-light); } .tag:hover:not(.on) { border-color: rgba(255,255,255,0.18); color: var(--paper); } .sc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 10px; } .sc-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); padding: 10px 7px; text-align: center; cursor: pointer; transition: all 0.15s; } .sc-item.on { background: rgba(200,149,42,0.12); border-color: var(--amber); } .sc-ico { font-size: 1.1rem; } .sc-lbl { font-family: 'DM Mono', monospace; font-size: 0.57rem; color: var(--muted); text-transform: uppercase; margin-top: 3px; line-height: 1.3; } .sc-item.on .sc-lbl { color: var(--amber-light); } .tl { position: relative; padding-left: 22px; } .tl::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.08); } .tl-item { position: relative; margin-bottom: 17px; } .tl-dot { position:absolute; left:-19px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--amber); } .tl-dot.letter { background:#3d7ab5; } .tl-dot.call { background:var(--green); } .tl-dot.visit { background:#9b59b6; } .tl-dot.research { background:var(--amber); } .tl-dot.registry { background:#e67e22; } .tl-dot.note { background:var(--muted); } .tl-date { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--muted); margin-bottom:3px; } .tl-cont { font-size:0.8rem; color:var(--paper); line-height:1.4; } .tl-type { font-family:'DM Mono',monospace; font-size:0.57rem; letter-spacing:0.8px; text-transform:uppercase; padding:1px 5px; margin-right:5px; display:inline-block; } .tl-type.letter { background:rgba(61,122,181,0.18); color:#6ba3d6; } .tl-type.call { background:rgba(39,174,96,0.18); color:#58d68d; } .tl-type.visit { background:rgba(155,89,182,0.18); color:#c39bd3; } .tl-type.research { background:rgba(200,149,42,0.18); color:var(--amber-light); } .tl-type.registry { background:rgba(230,126,34,0.18); color:#f0b429; } .tl-type.note { background:rgba(138,128,112,0.18); color:var(--muted); } .tl-resp { margin-top:3px; font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--amber-light); } .modal-ov { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; } .modal { background:var(--navy); border:1px solid rgba(200,149,42,0.25); width:100%; max-width:580px; max-height:90vh; overflow-y:auto; padding:22px; } .modal::-webkit-scrollbar { width:3px; } .modal::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); } .modal-t { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:2px; color:var(--amber); margin-bottom:18px; } .modal-act { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.07); } .lt-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .lt-card { padding:14px; border:2px solid rgba(255,255,255,0.1); cursor:pointer; transition:all 0.15s; text-align:center; background:rgba(255,255,255,0.02); } .lt-card:hover { border-color:rgba(200,149,42,0.35); } .lt-card.on { border-color:var(--amber); background:rgba(200,149,42,0.08); } .lt-icon { font-size:1.5rem; margin-bottom:5px; } .lt-title { font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.5px; color:var(--paper); margin-bottom:3px; text-transform:uppercase; } .lt-desc { font-size:0.7rem; color:var(--muted); line-height:1.3; } .hidden { display:none !important; } .closed-banner { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 7px; background: rgba(138,128,112,0.15); border: 1px solid rgba(138,128,112,0.3); color: var(--muted); display: inline-block; margin-right: 6px; } #dtv-tooltip { position:fixed; background:#0d1117; color:#f5f0e8; font-family:'DM Sans',sans-serif; font-size:0.75rem; font-weight:400; line-height:1.5; padding:8px 12px; border:1px solid rgba(200,149,42,0.5); max-width:220px; z-index:9999; pointer-events:none; display:none; box-shadow:0 4px 16px rgba(0,0,0,0.5); } .toast { position:fixed; bottom:24px; right:24px; background:#27ae60; color:white; font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.5px; padding:10px 18px; z-index:999; opacity:0; transition:opacity 0.3s; pointer-events:none; } .toast.show { opacity:1; } .toast.error { background:var(--red); } </style> </head> <body> <div class="header"> <div class="logo">DTV <span>Property CRM</span></div> <div class="header-actions"> <span id="dueCount" style="font-family:DM Mono;font-size:0.7rem;color:#e74c3c;display:none;"></span> <button class="btn btn-ghost" onclick="exportData()" data-tip="Download all your leads as a spreadsheet file you can open in Excel">Export CSV</button> <label class="btn btn-ghost" style="cursor:pointer;" data-tip="Restore your leads from a previously exported CSV file — will add to existing records without deleting anything">Import CSV<input type="file" accept=".csv" onchange="importCSV(event)" style="display:none;"></label> <button class="btn btn-primary" onclick="openNew()" data-tip="Add a new empty property or data-generated lead to your pipeline">+ New Lead</button> </div> </div> <!-- ══ ALL RECORDS VIEW ══ --> <div class="view active" id="viewRecords"> <div class="records-page"> <div class="records-controls"> <div class="search-wrap"> <span class="search-icon">⌕</span> <input type="text" class="search-box" id="searchInput" placeholder="Keywords separated by spaces..." oninput="renderList()"> </div> <div class="search-hint">e.g. "probate empty" matches records with both words</div> <div style="font-family:DM Mono;font-size:0.6rem;color:var(--muted);margin-bottom:6px;letter-spacing:0.5px;">FILTER LEADS BY:</div> <div class="filter-row"> <button class="filter-btn active" onclick="setFilter('all',this)" data-tip="Show every lead regardless of type or stage">All Leads</button> <button class="filter-btn" onclick="setFilter('property',this)" data-tip="Show only properties you spotted yourself on the ground">Seen In Person</button> <button class="filter-btn" onclick="setFilter('data',this)" data-tip="Show only leads found via Companies House, probate, EPC data etc.">Data Leads</button> </div> <div class="filter-row" style="margin-top:4px;"> <button class="filter-btn" onclick="setFilter('phase1',this)" data-tip="Show leads currently in Phase 1 — sending letters to neighbours and target address">Letters Stage</button> <button class="filter-btn" onclick="setFilter('phase2',this)" data-tip="Show leads in Phase 2 — researching the owner via Google, Gazette and Facebook">Research Stage</button> <button class="filter-btn" onclick="setFilter('phase3',this)" data-tip="Show leads in Phase 3 — deciding whether to spend £7 on a Land Registry lookup">Decision Stage</button> </div> <div class="filter-row" style="margin-top:4px;"> <button class="filter-btn" onclick="setFilter('pipeline',this)" data-tip="Show leads where you have owner contact details and are actively pursuing a deal">Active Deals</button> <button class="filter-btn" onclick="setFilter('due',this)" data-tip="Show leads where the next action date has passed" style="color:#e74c3c;border-color:rgba(192,57,43,0.3);">⚠ Action Due</button> <button class="filter-btn" onclick="setFilter('closed',this)" data-tip="Show closed records" style="color:#8a8070;border-color:rgba(138,128,112,0.3);">Closed</button> <button class="filter-btn" onclick="setFilter('review',this)" data-tip="Show properties in 6-month review" style="color:#9b59b6;border-color:rgba(155,89,182,0.3);">6-Month Review</button> </div> </div> <!-- Top pagination --> <div class="pagination" id="paginationTop"></div> <div class="cards-wrap"> <div class="cards-grid" id="propList"> <div class="empty-s">No leads yet.<br>Add your first property above.</div> </div> </div> <!-- Bottom pagination --> <div class="pagination" id="paginationBottom"></div> </div> </div> <!-- ══ RECORD DETAIL VIEW ══ --> <div class="view" id="viewDetail"> <div class="record-back"> <button class="back-btn" onclick="goBack()" data-tip="Return to all records">← All Records</button> <span class="record-addr-crumb" id="recordCrumb"></span> </div> <div class="record-page"> <div class="detail" id="mainContent"></div> </div> </div> <!-- NEW LEAD MODAL --> <div class="modal-ov hidden" id="newModal"> <div class="modal"> <div class="modal-t">Add New Lead</div> <div class="fl" style="margin-bottom:8px;">What type of lead is this?</div> <div class="lt-row"> <div class="lt-card on" id="ltP" onclick="setLT('property')"> <div class="lt-icon">🏚</div> <div class="lt-title">Seen In Person</div> <div class="lt-desc">Empty or distressed property spotted on the ground. Owner unknown.</div> </div> <div class="lt-card" id="ltD" onclick="setLT('data')"> <div class="lt-icon">📊</div> <div class="lt-title">Data Generated</div> <div class="lt-desc">Found via Companies House, probate, EPC data, Rightmove, referral, etc.</div> </div> </div> <div class="fg"> <label class="fl">Property Address *</label> <div style="display:flex;gap:6px;margin-bottom:6px;"> <input type="text" class="fi" id="nStreetSearch" placeholder="e.g. 14 Birchwood Avenue Widnes" style="flex:1;"> <button type="button" onclick="lookupAddress()" data-tip="Search for this address and find the full postcode" style="font-family:DM Mono;font-size:0.65rem;padding:8px 12px;background:var(--amber);color:var(--ink);border:none;cursor:pointer;letter-spacing:0.5px;white-space:nowrap;">FIND</button> </div> <div id="addrLookupResults" style="display:none;margin-bottom:6px;"> <select class="fi" id="addrLookupSelect" onchange="selectLookupAddress()"> <option value="">— Select the correct address —</option> </select> </div> <div id="addrLookupError" style="display:none;font-family:DM Mono;font-size:0.62rem;color:#e74c3c;margin-bottom:6px;"></div> <input type="text" class="fi" id="nAddr" placeholder="Full address appears here — or type manually"> <div style="font-family:DM Mono;font-size:0.58rem;color:var(--muted);margin-top:3px;">Type house number and street name above, or enter address manually below</div> </div> <div class="fg"> <label class="fl" style="color:var(--amber-light);">Why Am I Contacting Them? * (searchable)</label> <textarea class="fi why-fi" id="nWhy" rows="2" placeholder="e.g. Visibly empty 3+ years, smashed windows — clear void&#10;e.g. Companies House director of 4 BTLs, likely Section 24 pressure&#10;e.g. Probate record Q1 2025 — executor likely needs to sell"></textarea> </div> <div id="propFields"> <div class="fg"> <label class="fl">Initial Tier</label> <select class="fi" id="nTier"> <option value="1">Tier 1 — Low (assumptive, curtains closed)</option> <option value="2" selected>Tier 2 — Medium (visible distress)</option> <option value="3">Tier 3 — High (severe dereliction)</option> </select> </div> <div style="font-family:DM Mono;font-size:0.62rem;color:var(--muted);margin-bottom:12px;margin-top:-4px;">All property leads start at Phase 1. Tier determines how aggressively you pursue.</div> </div> <div id="dataFields" class="hidden"> <div class="g2"> <div class="fg"> <label class="fl">Data Source</label> <select class="fi" id="nSrc"> <option value="companies-house">Companies House</option> <option value="probate">Probate / Gazette</option> <option value="epc-boom">EPC / Boom Data</option> <option value="rightmove">Rightmove (stale/dated)</option> <option value="facebook">Facebook Group</option> <option value="referral">Referral</option> <option value="other">Other</option> </select> </div> <div class="fg"> <label class="fl">Owner Intel Available?</label> <select class="fi" id="nIntel"> <option value="name-contact">Name + Contact (phone/address)</option> <option value="name-only">Name Only — need to research</option> <option value="address-only">Property Address Only</option> <option value="none">Nothing Yet</option> </select> </div> </div> </div> <div class="modal-act"> <button class="btn btn-ghost" onclick="closeNew()">Cancel</button> <button class="btn btn-primary" onclick="saveNew()">Add Lead</button> </div> </div> </div> <!-- LOG ACTION MODAL --> <div class="modal-ov hidden" id="logModal"> <div class="modal"> <div class="modal-t" id="logModalTitle">Log Action</div> <div class="g2"> <div class="fg"> <label class="fl">Action Type</label> <select class="fi" id="lType"> <option value="letter">Letter Sent</option> <option value="call">Phone Call</option> <option value="visit">In-Person Visit</option> <option value="research">Desktop Research</option> <option value="registry">Land Registry (£7)</option> <option value="note">Note / Update</option> </select> </div> <div class="fg"> <label class="fl">Date</label> <input type="date" class="fi" id="lDate"> </div> </div> <div class="fg"> <label class="fl">Sent To / Target</label> <select class="fi" id="lTarget"> <option value="neighbour-both">Both Neighbours (Left + Right)</option> <option value="neighbour-left">Neighbour — Left Only</option> <option value="neighbour-right">Neighbour — Right Only</option> <option value="target-address">Target Address</option> <option value="owner-direct">Owner Direct</option> <option value="general">General</option> </select> </div> <div class="fg"> <label class="fl">Notes / Result (searchable)</label> <textarea class="fi" id="lNotes" placeholder="What happened? Intel received, response, outcome..."></textarea> </div> <div class="fg"> <label class="fl">Response / Outcome</label> <select class="fi" id="lResp"> <option value="none">No Response</option> <option value="confirmed-empty">✓ Confirmed Empty</option> <option value="owner-name">✓ Owner Name Obtained</option> <option value="owner-contact">✓ Owner Contact Details — Move to Pipeline</option> <option value="partial">~ Partial Intel</option> <option value="not-empty">✗ Property Not Empty</option> <option value="not-selling">✗ Not Selling — Do Not Contact Again</option> </select> </div> <div class="modal-act"> <button class="btn btn-ghost" onclick="closeLog()">Cancel</button> <button class="btn btn-primary" onclick="saveLog(editingLogIdx)">Save</button> </div> </div> </div> <script> let DB = JSON.parse(localStorage.getItem('dtv-crm-v2') || sessionStorage.getItem('dtv-crm-v2') || '[]'); let activeId = null; let filter = 'all'; let ltMode = 'property'; let currentPage = 1; const PAGE_SIZE = 30; const STORAGE_KEY = 'dtv-crm-v2'; const MAX_ATTACH_BYTES = 400 * 1024; // 400KB per file const save = () => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(DB)); } catch(e) { try { const keys = Object.keys(localStorage); keys.forEach(k => { if (k !== STORAGE_KEY) localStorage.removeItem(k); }); localStorage.setItem(STORAGE_KEY, JSON.stringify(DB)); } catch(e2) { console.warn('Storage full - data held in memory only this session'); } } }; const byId = id => DB.find(p => p.id === id); const sfTip = { confirmed_empty: 'Tick this when a neighbour or other source has confirmed the property is definitely empty', owner_name: 'Tick this when you have found out the name of the owner', long_term: 'Tick this if the property appears to have been empty for years rather than months', visible_distress: 'Tick this if there are clear visible signs of neglect — broken windows, overgrown garden, damage' }; const SFS = [ { key:'confirmed_empty', lbl:'Confirmed Empty', ico:'✓' }, { key:'owner_name', lbl:'Owner Name Known', ico:'👤' }, { key:'long_term', lbl:'Long-Term Void', ico:'📅' }, { key:'visible_distress', lbl:'Visible Distress', ico:'🔨' }, ]; function score(p) { if (p.lt === 'data') return 0; const base = parseInt(p.tier||2); const factors = (p.sf||[]).length * 2; return Math.min(base + factors, 10); } function rec(p) { const s = score(p); if (p.lt === 'data') { if (p.intel === 'name-contact') return 'Contact owner directly'; if (p.intel === 'name-only') return 'Research contact — Google, social'; return 'Letter to property address — periodic follow-up'; } const ph = p.phase; if (ph === 'phase3') { if (s >= 8) return 'Score 8-10 — Land Registry automatic. Do it now.'; if (s >= 5) return 'Score 5-7 — Land Registry recommended'; return 'Score 1-4 — weigh up before spending £7'; } if (ph === 'review') { if (s >= 8) return 'Score 8-10 — high priority restart. Treat as fresh Tier 3 lead.'; if (s >= 5) return 'Score 5-7 — worth restarting the full cycle'; return 'Score 1-4 — low priority. One letter only.'; } if (ph === 'pipeline') return 'Active deal — manage vendor relationship'; if (s >= 8) return 'High priority lead — complete all phases promptly'; if (s >= 5) return 'Good lead — follow standard process'; return 'Phase 1 is vital regardless of score — send letters'; } function nextAction(p) { if (!p) return { txt:'No data', date:null, ov:false }; const tl = p.tl || []; const today = new Date().toISOString().split('T')[0]; if (p.rmUrl) { if (!p.rmLastChecked) return { txt:'Check Rightmove listing — not yet checked since URL was added', date:today, ov:true }; const nextRm = new Date(p.rmLastChecked); nextRm.setDate(nextRm.getDate()+30); const nextRmStr = nextRm.toISOString().split('T')[0]; if (nextRmStr <= today) return { txt:'Check Rightmove listing — 30 days since last check', date:nextRmStr, ov:true }; } if (p.phase === 'pipeline') { if (p.plNextContact) { const overdue = p.plNextContact < today; return { txt: 'Agreed call/meeting with vendor' + (overdue ? ' — OVERDUE' : ''), date: p.plNextContact, ov: overdue }; } return { txt:'Active deal — log next steps or agreed contact date in deal details', date:null, ov:false }; } if (p.phase === 'review') { const sr = score(p); let reviewTxt = 'Drive-by review due — '; if (sr >= 8) reviewTxt += 'score ' + sr + '/10 — HIGH PRIORITY. Restart full cycle if still empty.'; else if (sr >= 5) reviewTxt += 'score ' + sr + '/10 — worth restarting the full cycle.'; else reviewTxt += 'score ' + sr + '/10 — low priority. One letter only if still looks empty.'; return { txt: reviewTxt, date:p.revDate||null, ov:(p.revDate||'9999') < today }; } if (p.lt === 'data') { const letters = tl.filter(t => t.type==='letter'); const calls = tl.filter(t => t.type==='call'); const visits = tl.filter(t => t.type==='visit'); const research = tl.filter(t => t.type==='research'); if (!letters.length && !calls.length && !visits.length) { const intel = p.intel || 'none'; if (intel === 'name-contact') return { txt:'Call or write to the owner directly — you have their contact details', date:null, ov:false }; if (intel === 'name-only') return { txt:'Research owner contact details — Google, social media, Companies House', date:null, ov:false }; return { txt:'Send letter to the property address — owner contact unknown', date:null, ov:false }; } if (research.length && !letters.length && !calls.length) return { txt:'Research complete — now make contact via letter or call', date:today, ov:false }; const contactActions = tl.filter(t => t.type==='letter' || t.type==='call' || t.type==='visit'); const lastContact = contactActions[contactActions.length-1]; const nd = new Date(lastContact.date); nd.setDate(nd.getDate()+30); const nds = nd.toISOString().split('T')[0]; const overdue = nds < today; const nextMethod = calls.length ? 'letter' : 'call'; return { txt:'Follow-up ' + nextMethod + ' to owner — 30 days since last contact', date:nds, ov:overdue }; } const neighbourLetters = tl.filter(a => a.type==='letter' && (a.target==='neighbour-both'||a.target==='neighbour-left'||a.target==='neighbour-right')); const targetLetters = tl.filter(a => a.type==='letter' && a.target==='target-address'); const researchDone = tl.filter(a => a.type==='research'); const registryDone = tl.filter(a => a.type==='registry'); if (p.phase === 'phase1') { if (!neighbourLetters.length) return { txt:'Step 1 — Send letters to both neighbours (left and right)', date:null, ov:false }; if (!targetLetters.length) { const nd = new Date(neighbourLetters[neighbourLetters.length-1].date); nd.setDate(nd.getDate()+14); const nds = nd.toISOString().split('T')[0]; return { txt:'Step 2 — Send letter to the target address itself', date:nds, ov:nds<today }; } return { txt:'Letters complete — move to desktop research', date:today, ov:false }; } if (p.phase === 'phase2') { if (!researchDone.length) return { txt:'Desktop research — search Google, check Gazette for probate, try Facebook community groups', date:null, ov:false }; return { txt:'Research logged — move to Phase 3 decision', date:null, ov:false }; } if (p.phase === 'phase3') { if (!registryDone.length) { return score(p) >= 3 ? { txt:'Buy Land Registry title (£7) — score justifies it', date:null, ov:false } : { txt:'Decision: is this property worth £7 for Land Registry? If not, set to 6-month review', date:null, ov:false }; } return { txt:'Land Registry done — review findings and contact owner if details found', date:null, ov:false }; } return { txt:'Review this lead', date:null, ov:false }; } const isRmDue = p => { if (!p.rmUrl) return false; const today = new Date().toISOString().split('T')[0]; if (!p.rmLastChecked) return true; const next = new Date(p.rmLastChecked); next.setDate(next.getDate()+30); return next.toISOString().split('T')[0] <= today; }; const isDue = p => { const today = new Date().toISOString().split('T')[0]; const na = nextAction(p); // Only flag overdue if the date is explicitly in the past AND ov flag is set // Records with no timeline (date===today, ov:false) are not considered overdue if (na.ov && na.date && na.date < today) return true; if (p.rmUrl && p.rmLastChecked) { const next = new Date(p.rmLastChecked); next.setDate(next.getDate()+30); if (next.toISOString().split('T')[0] <= today) return true; } if (p.rmUrl && !p.rmLastChecked) return true; return false; }; function matches(p, q) { if (!q.trim()) return true; const kws = q.toLowerCase().trim().split(/\s+/).filter(Boolean); const blob = [p.addr,p.why,p.notes,p.ownerName,p.ownerPhone,p.ownerAddr, p.ownerEmail,p.leftN,p.rightN,p.src,p.lt,p.phase, ...(p.tl||[]).map(t=>`${t.notes||''} ${t.resp||''} ${t.target||''} ${t.type||''}`) ].join(' ').toLowerCase(); return kws.every(k => blob.includes(k)); } function fmtDate(d) { if (!d) return '—'; const [y,m,dy]=d.split('-'); return `${dy}/${m}/${y}`; } function respLbl(r) { return {'confirmed-empty':'✓ Confirmed Empty','owner-name':'✓ Owner Name Obtained','owner-contact':'✓ Owner Contact — Moved to Pipeline','partial':'~ Partial Intel','not-empty':'✗ Not Empty','not-selling':'✗ Not Selling — Review Set'}[r] || r; } const phTip = { phase1:'Letters being sent to neighbours and target address', phase2:'Desktop research underway — Google, Gazette, Facebook', phase3:'Decision point — is this worth a £7 Land Registry lookup?', pipeline:'Owner contact obtained — actively pursuing this deal', review:'No progress yet — set for a drive-by check in 6 months', outreach:'Data lead — sending initial outreach to owner' }; const phLbl = { phase1:'Phase 1 — Letters', phase2:'Phase 2 — Research', phase3:'Phase 3 — Decision', pipeline:'Pipeline — Live Deal', review:'6-Month Review', outreach:'Initial Outreach' }; const phKey = { phase1:'pp1', phase2:'pp2', phase3:'pp3', pipeline:'ppl', review:'prv', outreach:'pot' }; const srcLbl = { 'companies-house':'Companies House','probate':'Probate / Gazette','epc-boom':'EPC / Boom','rightmove':'Rightmove','facebook':'Facebook','referral':'Referral','other':'Other' }; // ── PAGINATION ── function renderPagination(total, page, totalPages, containerId) { const el = document.getElementById(containerId); if (totalPages <= 1) { el.innerHTML = ''; return; } let html = `<button class="page-btn" onclick="goToPage(1)" ${page===1?'disabled':''}>«</button>`; html += `<button class="page-btn" onclick="goToPage(${page-1})" ${page===1?'disabled':''}>‹</button>`; const start = Math.max(1, page-2); const end = Math.min(totalPages, start+4); for (let i = start; i <= end; i++) { html += `<button class="page-btn ${i===page?'active':''}" onclick="goToPage(${i})">${i}</button>`; } html += `<button class="page-btn" onclick="goToPage(${page+1})" ${page===totalPages?'disabled':''}>›</button>`; html += `<button class="page-btn" onclick="goToPage(${totalPages})" ${page===totalPages?'disabled':''}>»</button>`; html += `<span class="page-info">${total} leads · page ${page} of ${totalPages}</span>`; el.innerHTML = html; } function goToPage(p) { currentPage = p; renderList(); document.querySelector('.cards-wrap').scrollTop = 0; } // ── RENDER LIST ── function renderList() { const list = document.getElementById('propList'); const q = document.getElementById('searchInput').value; let items = DB.filter(p => { if (!matches(p,q)) return false; if (filter === 'closed') return p.closed === true; if (filter === 'all') return true; if (p.closed) return false; if (filter === 'due') return isDue(p); if (filter === 'property') return p.lt !== 'data'; if (filter === 'data') return p.lt === 'data'; return p.phase === filter; }); items.sort((a,b) => { if(isDue(a)&&!isDue(b)) return -1; if(!isDue(a)&&isDue(b)) return 1; return new Date(b.created)-new Date(a.created); }); const dc = DB.filter(isDue).length; const dEl = document.getElementById('dueCount'); dEl.textContent = dc ? `${dc} due` : ''; dEl.style.display = dc ? '' : 'none'; if (!items.length) { list.innerHTML = '<div class="empty-s">No leads match.<br>Try different keywords.</div>'; renderPagination(0,1,1,'paginationTop'); renderPagination(0,1,1,'paginationBottom'); return; } const isData = p => p.lt==='data'; const active = items.filter(p => !p.closed); const closed = items.filter(p => p.closed); // Paginate active only; show closed section separately at end const totalActive = active.length; const totalPages = Math.max(1, Math.ceil(totalActive / PAGE_SIZE)); if (currentPage > totalPages) currentPage = totalPages; const pageActive = active.slice((currentPage-1)*PAGE_SIZE, currentPage*PAGE_SIZE); const renderCard = p => { const s = score(p), na = nextAction(p), due = isDue(p); const bc = isData(p) ? 'bd' : `b${p.tier}`; const bl = isData(p) ? `DATA · ${(srcLbl[p.src]||'').toUpperCase()}` : `T${p.tier} · ${(phLbl[p.phase]||'').split('—')[0].trim().toUpperCase()}`; const dots = isData(p) ? '' : Array.from({length:10},(_,i)=>`<div class="sd ${i<s?'on':''}"></div>`).join(''); return `<div class="property-card ${p.closed?'closed-card':isData(p)?'':'t'+p.tier}" onclick="sel('${p.id}')"> <div class="card-addr">${p.addr}</div> ${p.why?`<div class="card-why">${p.closed?'CLOSED — ':''} ${p.why}</div>`:''} <div class="card-meta"> ${p.closed?'<span style="font-family:DM Mono;font-size:0.57rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;">● Closed</span>':'<div class="tbadge '+bc+'">'+bl+'</div>'} ${!p.closed&&dots?`<div class="sdots">${dots}</div>`:''} ${!p.closed?`<div class="natag ${due?'due':''}">${due?'⚠ DUE':(na.date||'—')}</div>`:''} ${isRmDue(p)?`<div style="font-family:DM Mono;font-size:0.55rem;color:#ff6b6b;margin-top:3px;">🔴 RM check due</div>`:''} </div> <div style="display:flex;justify-content:flex-end;margin-top:6px;"> <button onclick="event.stopPropagation();delConfirm('${p.id}')" style="font-family:DM Mono;font-size:0.55rem;padding:2px 7px;background:rgba(192,57,43,0.15);border:1px solid rgba(192,57,43,0.3);color:#e74c3c;cursor:pointer;" data-tip="Delete this lead permanently">Delete</button> </div> </div>`; }; let html = pageActive.map(renderCard).join(''); // Show closed on last page (or always if filter=closed) if ((currentPage === totalPages || filter === 'closed') && closed.length && (filter === 'all' || filter === 'closed')) { html += `<div class="closed-section-header">● Closed Records (${closed.length})</div>`; html += closed.map(renderCard).join(''); } list.innerHTML = html || '<div class="empty-s">No leads on this page.</div>'; renderPagination(totalActive, currentPage, totalPages, 'paginationTop'); renderPagination(totalActive, currentPage, totalPages, 'paginationBottom'); } // ── VIEW SWITCHING ── function showView(name) { document.querySelectorAll('.view').forEach(v => v.classList.remove('active')); document.getElementById('view' + name).classList.add('active'); } function goBack() { activeId = null; showView('Records'); renderList(); } // ── SELECT RECORD ── function sel(id) { activeId = id; const p = byId(id); if (p) document.getElementById('recordCrumb').textContent = p.addr; showView('Detail'); try { renderDetail(id); setTimeout(() => { const ta = document.getElementById('notesArea'); if (ta) ta.scrollTop = ta.scrollHeight; }, 50); } catch(e) { console.error('renderDetail error:', e); document.getElementById('mainContent').innerHTML = '<div style="color:#e74c3c;font-family:DM Mono;padding:20px;">Error loading record: ' + e.message + '</div>'; } } // ── ATTACHMENTS ── function attachIcon(name) { const ext = (name||'').split('.').pop().toLowerCase(); if (['jpg','jpeg','png','gif','webp'].includes(ext)) return '🖼️'; if (ext === 'pdf') return '📄'; if (['doc','docx'].includes(ext)) return '📝'; if (['csv','xls','xlsx'].includes(ext)) return '📊'; return '📎'; } function fmtSize(bytes) { if (bytes < 1024) return bytes + 'B'; if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + 'KB'; return (bytes/1024/1024).toFixed(1) + 'MB'; } function isImage(name) { return ['jpg','jpeg','png','gif','webp'].includes((name||'').split('.').pop().toLowerCase()); } function renderAttachments(id) { const p = byId(id); if (!p) return ''; const attachments = p.attachments || []; const itemsHtml = attachments.length ? attachments.map((a, i) => ` <div class="attach-item"> <span class="attach-icon">${attachIcon(a.name)}</span> <span class="attach-name" title="${a.name}">${a.name}</span> <span class="attach-size">${fmtSize(a.size)}</span> <div class="attach-actions"> <button class="attach-btn" onclick="downloadAttachment('${id}',${i})" data-tip="Download this file">↓</button> ${isImage(a.name) ? `<button class="attach-btn" onclick="previewAttachment('${id}',${i})" data-tip="Preview image">👁</button>` : ''} <button class="attach-btn del" onclick="deleteAttachment('${id}',${i})" data-tip="Remove this attachment">✕</button> </div> </div> ${isImage(a.name) && a.preview ? `<img class="attach-img-preview" src="${a.data}" alt="${a.name}" id="prev_${id}_${i}" style="display:none;">` : ''} `).join('') : '<div style="font-family:DM Mono;font-size:0.65rem;color:var(--muted);padding:4px 0;">No attachments yet.</div>'; return `<div class="attach-sec"> <div class="attach-sec-t">📎 Attachments</div> <div class="attach-drop" id="attachDrop_${id}" ondragover="event.preventDefault();this.classList.add('drag-over')" ondragleave="this.classList.remove('drag-over')" ondrop="handleAttachDrop(event,'${id}')" onpaste="handleAttachPaste(event,'${id}')"> <input type="file" class="attach-file-input" multiple accept="image/*,.pdf,.doc,.docx,.csv,.xlsx,.xls" onchange="handleAttachFiles(event,'${id}')"> <div class="attach-drop-lbl"> <strong>Click to upload</strong> · drag & drop · or paste (Ctrl+V) an image<br> JPG, PNG, PDF, CSV, Word · max 400KB per file </div> </div> <div class="attach-list" id="attachList_${id}">${itemsHtml}</div> </div>`; } function handleAttachFiles(event, id) { const files = Array.from(event.target.files); processAttachFiles(files, id); event.target.value = ''; } function handleAttachDrop(event, id) { event.preventDefault(); document.getElementById('attachDrop_' + id).classList.remove('drag-over'); const files = Array.from(event.dataTransfer.files); processAttachFiles(files, id); } function handleAttachPaste(event, id) { const items = Array.from(event.clipboardData.items); const imageItems = items.filter(item => item.type.startsWith('image/')); if (!imageItems.length) return; event.preventDefault(); imageItems.forEach(item => { const file = item.getAsFile(); if (file) processAttachFiles([file], id); }); } function processAttachFiles(files, id) { const p = byId(id); if (!p) return; if (!p.attachments) p.attachments = []; let added = 0; let toProcess = files.length; files.forEach(file => { if (file.size > MAX_ATTACH_BYTES) { showToast('File too large: ' + file.name + ' (' + fmtSize(file.size) + ' — max 400KB)', true); toProcess--; if (toProcess === 0 && added > 0) { save(); renderDetail(id); } return; } const reader = new FileReader(); reader.onload = e => { p.attachments.push({ name: file.name || 'pasted-image-' + Date.now() + '.png', size: file.size, type: file.type, data: e.target.result, preview: file.type.startsWith('image/') }); added++; toProcess--; if (toProcess === 0) { save(); renderDetail(id); showToast('✓ ' + added + ' file' + (added!==1?'s':'') + ' attached'); } }; reader.readAsDataURL(file); }); } function downloadAttachment(id, idx) { const p = byId(id); if (!p || !p.attachments || !p.attachments[idx]) return; const a = p.attachments[idx]; const link = document.createElement('a'); link.href = a.data; link.download = a.name; link.click(); } function previewAttachment(id, idx) { const imgEl = document.getElementById('prev_' + id + '_' + idx); if (imgEl) imgEl.style.display = imgEl.style.display === 'none' ? 'block' : 'none'; } function deleteAttachment(id, idx) { if (!confirm('Remove this attachment?')) return; const p = byId(id); if (!p || !p.attachments) return; p.attachments.splice(idx, 1); save(); renderDetail(id); showToast('✓ Attachment removed'); } // ── RENDER DETAIL ── function renderDetail(id) { const p = byId(id); if (!p) return; const s = score(p), na = nextAction(p), r = rec(p); const isD = p.lt==='data'; const dots10 = Array.from({length:10},(_,i)=>`<div class="scd ${i<s?'on':''}"></div>`).join(''); const tlHtml = !(p.tl||[]).length ? '<div style="color:var(--muted);font-family:DM Mono;font-size:0.73rem;padding:6px 0;">No actions logged yet.</div>' : [...(p.tl||[])].map((t,i)=>({t,i})).reverse().map(({t,i})=>` <div class="tl-item"> <div class="tl-dot ${t.type}"></div> <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;"> <div> <div class="tl-date">${fmtDate(t.date)} · ${(t.target||'').replace(/-/g,' ')}</div> <div class="tl-cont"><span class="tl-type ${t.type}">${t.type}</span>${t.notes||'—'} ${t.resp&&t.resp!=='none'?`<div class="tl-resp">↳ ${respLbl(t.resp)}</div>`:''} ${(t.prevValue||t.newValue)?`<div style="font-family:DM Mono;font-size:0.62rem;color:var(--muted);margin-top:3px;">Was: <span style="color:#e0d0b0">${t.prevValue||'—'}</span> → Now: <span style="color:var(--amber-light)">${t.newValue||'—'}</span></div>`:''}</div> </div> <button onclick="openLog(${i})" style="font-family:DM Mono;font-size:0.58rem;padding:2px 7px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0;">Edit</button> </div> </div>`).join(''); const sfHtml = SFS.map(f=>`<div class="sc-item ${(p.sf||[]).includes(f.key)?'on':''}" onclick="toggleSF('${id}','${f.key}')" data-tip="${sfTip[f.key]||''}"> <div class="sc-ico">${f.ico}</div><div class="sc-lbl">${f.lbl}</div></div>`).join(''); const phases = isD ? ['outreach','pipeline','review'] : ['phase1','phase2','phase3','pipeline','review']; document.getElementById('mainContent').innerHTML = `<div class="detail"> <div style="display:flex;justify-content:flex-end;margin-bottom:8px;"> <button class="btn btn-danger btn-sm" onclick="del('${id}')" data-tip="Permanently delete this lead — cannot be undone">Delete Record</button> </div> ${renderAttachments(id)} <div class="na-panel ${na.ov?'ov':''}"> <div> <div class="na-lbl">Next Action${na.ov?' — OVERDUE':''}</div> <div class="na-txt">${na.txt}</div> ${isRmDue(p) ? `<div style="font-family:DM Mono;font-size:0.65rem;color:#ff6b6b;margin-top:4px;padding:4px 8px;background:rgba(255,75,75,0.08);border:1px solid rgba(255,75,75,0.2);display:inline-block;">🔴 Rightmove listing check overdue — scroll down to check</div>` : ''} ${na.date?`<div class="na-date">${fmtDate(na.date)}</div>`:''} </div> <button class="btn btn-primary btn-sm" onclick="openLog()" data-tip="Record what you did — letter sent, call made, visit, research.">Log Action</button> </div> <div class="d-header"> <div style="flex:1;min-width:0;"> <div class="d-addr">${p.addr}</div> ${p.why?`<div class="d-why">${p.why}</div>`:''} <div class="d-badges"> ${isD?`<span class="tbadge bd">${srcLbl[p.src]||'Data'}</span>`:`<span class="tbadge b${p.tier}">Tier ${p.tier}</span>`} <span class="pbadge ${phKey[p.phase]||'pp1'}">${phLbl[p.phase]||'Phase 1'}</span> ${isD&&p.intel?`<span class="pbadge pot">${p.intel.replace(/-/g,' ')}</span>`:''} </div> </div> ${!isD?`<div class="score-blk"> <div class="total-sc">${s}<span style="font-family:'DM Sans',sans-serif;font-size:1rem;color:var(--muted);letter-spacing:0;">/10</span></div> <div class="sc-dots">${dots10}</div> <div class="sc-rec">${r}</div> </div>`:`<div class="score-blk"><div class="sc-rec" style="max-width:120px;">${r}</div></div>`} </div> <div class="sec"> <div class="sec-t">Current Phase / Status</div> <div class="tag-row">${phases.map(ph=>`<div class="tag ${p.phase===ph?'on':''}" onclick="setPhase('${id}','${ph}')" data-tip="${phTip[ph]||''}">${phLbl[ph]}</div>`).join('')}</div> <div style="margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;"> <div style="font-family:DM Mono;font-size:0.6rem;color:var(--muted);max-width:300px;"> ${p.closed ? '● This record is <strong style="color:var(--muted)">CLOSED</strong> — it is hidden from active filters but remains searchable and prevents duplicates.' : 'Mark as closed when a lead has ended — owner said no, property sold, confirmed not empty, etc.'} </div> <button onclick="${p.closed ? `reopenRecord('${id}')` : `closeRecord('${id}')`}" style="font-family:DM Mono;font-size:0.65rem;padding:6px 14px;background:${p.closed ? 'rgba(39,174,96,0.15)' : 'rgba(138,128,112,0.15)'};color:${p.closed ? '#58d68d' : 'var(--muted)'};border:1px solid ${p.closed ? 'rgba(39,174,96,0.3)' : 'rgba(138,128,112,0.3)'};cursor:pointer;letter-spacing:0.5px;white-space:nowrap;"> ${p.closed ? 'Reopen Lead' : 'Close This Lead'} </button> </div> </div> ${p.phase === 'pipeline' ? ` <div class="sec" style="border-color:rgba(39,174,96,0.25);background:rgba(39,174,96,0.04);"> <div class="sec-t" style="color:#58d68d;border-bottom-color:rgba(39,174,96,0.2);">🤝 Live Deal — Pipeline Details</div> <div class="fg"><label class="fl" style="color:#58d68d;">Vendor Situation</label><textarea class="fi" id="pl_situation_${id}" style="min-height:70px;border-color:rgba(39,174,96,0.2);" placeholder="What is driving their motivation to sell?">${p.plSituation||''}</textarea></div> <div class="g2"> <div class="fg"><label class="fl" style="color:#58d68d;">Their Asking Price / Expectation</label><input type="text" class="fi" id="pl_asking_${id}" style="border-color:rgba(39,174,96,0.2);" value="${p.plAsking||''}" placeholder="e.g. £180,000 or 'not sure yet'"></div> <div class="fg"><label class="fl" style="color:#58d68d;">My Offer / Deal Structure</label><input type="text" class="fi" id="pl_offer_${id}" style="border-color:rgba(39,174,96,0.2);" value="${p.plOffer||''}" placeholder="e.g. £155k cash / lease option / assisted sale"></div> </div> <div class="fg"><label class="fl" style="color:#58d68d;">Next Agreed Contact Date</label><input type="date" class="fi" id="pl_nextContact_${id}" style="border-color:rgba(39,174,96,0.2);" value="${p.plNextContact||''}"></div> <button onclick="savePipeline('${id}')" style="width:100%;margin-top:4px;font-family:DM Mono;font-size:0.65rem;padding:7px 14px;background:rgba(39,174,96,0.8);color:white;border:none;cursor:pointer;letter-spacing:0.5px;">SAVE DEAL DETAILS</button> </div>` : ''} <div class="sec"> <div class="sec-t">Property Address</div> <div style="display:flex;gap:6px;margin-bottom:6px;"> <input type="text" class="fi" id="addrSearch_${id}" placeholder="e.g. 14 Birchwood Avenue Widnes" style="flex:1;"> <button type="button" onclick="lookupAddressDetail('${id}')" style="font-family:DM Mono;font-size:0.62rem;padding:7px 10px;background:rgba(200,149,42,0.2);color:var(--amber-light);border:1px solid rgba(200,149,42,0.3);cursor:pointer;white-space:nowrap;">FIND</button> </div> <div id="addrResults_${id}" style="display:none;margin-bottom:6px;"><select class="fi" id="addrSelect_${id}" onchange="selectAddressDetail('${id}')"><option value="">— Select address —</option></select></div> <div id="addrError_${id}" style="display:none;font-family:DM Mono;font-size:0.62rem;color:#e74c3c;margin-bottom:6px;"></div> <div class="fg"> <label class="fl">Address</label> <input type="text" class="fi" id="addrField_${id}" value="${p.addr}" placeholder="Full property address"> ${p.svUrl ? `<a href="${p.svUrl}" target="_blank" style="display:inline-block;margin-top:6px;font-family:DM Mono;font-size:0.65rem;padding:6px 12px;background:rgba(66,133,244,0.15);color:#6ba3d6;border:1px solid rgba(66,133,244,0.3);text-decoration:none;">📍 View on Street View</a>` : ''} </div> <button onclick="saveAddr('${id}')" style="width:100%;margin-top:4px;font-family:DM Mono;font-size:0.65rem;padding:7px 14px;background:var(--amber);color:var(--ink);border:none;cursor:pointer;letter-spacing:0.5px;">SAVE ADDRESS</button> </div> <div class="sec"> <div class="sec-t" style="color:var(--amber-light);">Why Am I Contacting Them?</div> <textarea class="fi why-fi" id="whyArea_${id}" style="min-height:65px;" placeholder="Reason for pursuing this lead...">${p.why||''}</textarea> <button onclick="upd('${id}','why',document.getElementById('whyArea_${id}').value)" style="margin-top:6px;font-family:DM Mono;font-size:0.65rem;padding:5px 14px;background:var(--amber);color:var(--ink);border:none;cursor:pointer;letter-spacing:0.5px;">SAVE</button> </div> <div class="g2"> <div class="sec"> <div class="sec-t">Owner Details</div> <div class="fg"><label class="fl">Name</label><input type="text" class="fi" id="own_name_${id}" value="${p.ownerName||''}" placeholder="Unknown"></div> <div class="fg"><label class="fl">Owner Address</label><input type="text" class="fi" id="own_addr_${id}" value="${p.ownerAddr||''}" placeholder="If different from property"></div> <div class="fg"><label class="fl">Phone</label><input type="text" class="fi" id="own_phone_${id}" value="${p.ownerPhone||''}" placeholder="—"></div> <div class="fg"><label class="fl">Email</label><input type="text" class="fi" id="own_email_${id}" value="${p.ownerEmail||''}" placeholder="—"></div> <button onclick="saveOwner('${id}')" style="width:100%;margin-top:4px;font-family:DM Mono;font-size:0.65rem;padding:7px 14px;background:var(--amber);color:var(--ink);border:none;cursor:pointer;letter-spacing:0.5px;">SAVE OWNER DETAILS</button> </div> <div class="sec"> <div class="sec-t">Neighbour Details</div> <div class="fg"><label class="fl">Left Neighbour</label><input type="text" class="fi" id="nb_leftN_${id}" value="${p.leftN||''}" placeholder="House no. / address"></div> <div class="fg"><label class="fl">Left Contact</label><input type="text" class="fi" id="nb_leftNC_${id}" value="${p.leftNC||''}" placeholder="Phone / notes"></div> <div class="fg"><label class="fl">Right Neighbour</label><input type="text" class="fi" id="nb_rightN_${id}" value="${p.rightN||''}" placeholder="House no. / address"></div> <div class="fg"><label class="fl">Right Contact</label><input type="text" class="fi" id="nb_rightNC_${id}" value="${p.rightNC||''}" placeholder="Phone / notes"></div> <button onclick="saveNeighbours('${id}')" style="width:100%;margin-top:4px;font-family:DM Mono;font-size:0.65rem;padding:7px 14px;background:var(--amber);color:var(--ink);border:none;cursor:pointer;letter-spacing:0.5px;">SAVE NEIGHBOUR DETAILS</button> </div> </div> ${!isD?`<div class="sec"> <div class="sec-t">Score Factors — tap to toggle</div> <div class="sc-grid">${sfHtml}</div> <div style="font-family:DM Mono;font-size:0.6rem;color:var(--muted);">Tier ${p.tier} base (${p.tier}pts) + ${(p.sf||[]).length} factor${(p.sf||[]).length!==1?'s':''} × 2pts = <strong style="color:var(--amber)">${s}/10</strong></div> </div>`:''} <div class="sec" style="border-color:rgba(255,75,75,0.2);"> <div class="sec-t" style="color:#ff6b6b;border-bottom-color:rgba(255,75,75,0.15);">Rightmove Listing</div> <div class="fg"> <label class="fl">Rightmove URL</label> <div style="display:flex;gap:6px;"> <input type="text" class="fi" id="rm_url_${id}" value="${p.rmUrl||''}" placeholder="https://www.rightmove.co.uk/properties/..."> ${p.rmUrl ? `<a href="${p.rmUrl}" target="_blank" style="font-family:DM Mono;font-size:0.65rem;padding:8px 12px;background:rgba(255,75,75,0.15);color:#ff6b6b;border:1px solid rgba(255,75,75,0.3);cursor:pointer;text-decoration:none;white-space:nowrap;">View →</a>` : ''} </div> </div> <div style="font-family:DM Mono;font-size:0.6rem;color:var(--muted);margin-bottom:10px;"> ${p.rmLastChecked ? 'Last checked: ' + fmtDate(p.rmLastChecked) : 'Not yet checked'} </div> <button onclick="saveRightmove('${id}')" style="width:100%;font-family:DM Mono;font-size:0.65rem;padding:7px 14px;background:rgba(255,75,75,0.2);color:#ff6b6b;border:1px solid rgba(255,75,75,0.3);cursor:pointer;letter-spacing:0.5px;">SAVE & LOG RIGHTMOVE CHECK</button> </div> <div class="sec"> <div class="sec-t">Notes — searchable by keyword in sidebar</div> <div style="font-family:DM Mono;font-size:0.6rem;color:var(--muted);margin-bottom:6px;">Click inside to auto-stamp today's date, then type your note.</div> <textarea class="fi" id="notesArea" style="min-height:140px;" onclick="stampDate('${id}')" oninput="scheduleNotesSave('${id}')" placeholder="Click here — today's date stamps automatically, then type your note...">${p.notes||''}</textarea> <div style="font-family:DM Mono;font-size:0.58rem;color:var(--muted);margin-top:4px;" id="notesSaveStatus">Auto-saves as you type</div> </div> <div class="sec"> <div class="sec-t">Activity Timeline</div> <div class="tl">${tlHtml}</div> </div> <div style="margin-bottom:40px;font-family:DM Mono;font-size:0.6rem;color:var(--muted);">Added ${fmtDate(p.created)} · ${(p.tl||[]).length} action${(p.tl||[]).length!==1?'s':''} logged</div> </div>`; // Bind paste listener to the attachment drop zone setTimeout(() => { const dropEl = document.getElementById('attachDrop_' + id); if (dropEl) { dropEl.addEventListener('paste', e => handleAttachPaste(e, id)); // Also bind to document so paste works anywhere on record page document.addEventListener('paste', function onPaste(e) { if (!document.getElementById('viewDetail').classList.contains('active')) return; const items = Array.from(e.clipboardData.items); if (items.some(i => i.type.startsWith('image/'))) handleAttachPaste(e, id); }, { once: true }); } }, 100); } // ── ALL EXISTING FUNCTIONS (unchanged) ── let _notesSaveTimer = null; function scheduleNotesSave(id) { clearTimeout(_notesSaveTimer); const statusEl = document.getElementById('notesSaveStatus'); if (statusEl) statusEl.textContent = 'Unsaved changes...'; _notesSaveTimer = setTimeout(() => { const ta = document.getElementById('notesArea'); if (!ta) return; const p = byId(id); if (!p) return; p.notes = ta.value; save(); if (statusEl) statusEl.textContent = '✓ Saved'; setTimeout(() => { if (statusEl) statusEl.textContent = 'Auto-saves as you type'; }, 2000); }, 800); } function stampDate(id) { const ta = document.getElementById('notesArea'); if (!ta) return; const today = new Date(); const todayStr = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; if (ta.value.includes(todayStr)) return; const p = byId(id); ta.value + '\n' + todayStr + ' '; p.notes = ta.value; save(); ta.setSelectionRange(ta.value.length, ta.value.length); } function toggleSF(id,k) { const p=byId(id); if(!p.sf)p.sf=[]; const i=p.sf.indexOf(k); i===-1?p.sf.push(k):p.sf.splice(i,1); save();renderDetail(id); showToast('✓ Score updated'); } function setPhase(id,ph) { const p=byId(id); p.phase=ph; if(ph==='review'){const d=new Date();d.setMonth(d.getMonth()+6);p.revDate=d.toISOString().split('T')[0];} save();renderDetail(id); showToast('✓ Phase updated'); } function closeRecord(id) { if (!confirm('Close this lead? It will be hidden from active filters but kept on file and remain searchable.')) return; const p = byId(id); p.closed = true; p.closedDate = new Date().toISOString().split('T')[0]; save(); renderDetail(id); showToast('● Lead closed — kept on file'); } function reopenRecord(id) { const p = byId(id); p.closed = false; p.closedDate = null; save(); renderDetail(id); showToast('✓ Lead reopened — back in active pipeline'); } function saveOwner(id) { const p = byId(id); const prev = { ownerName:p.ownerName||'', ownerAddr:p.ownerAddr||'', ownerPhone:p.ownerPhone||'', ownerEmail:p.ownerEmail||'' }; p.ownerName = document.getElementById('own_name_' + id).value.trim(); p.ownerAddr = document.getElementById('own_addr_' + id).value.trim(); p.ownerPhone = document.getElementById('own_phone_' + id).value.trim(); p.ownerEmail = document.getElementById('own_email_' + id).value.trim(); const changes = []; if (p.ownerName !== prev.ownerName) changes.push('Name: ' + (prev.ownerName||'unknown') + ' → ' + (p.ownerName||'unknown')); if (p.ownerAddr !== prev.ownerAddr) changes.push('Address: ' + (prev.ownerAddr||'unknown') + ' → ' + (p.ownerAddr||'unknown')); if (p.ownerPhone !== prev.ownerPhone) changes.push('Phone: ' + (prev.ownerPhone||'unknown') + ' → ' + (p.ownerPhone||'unknown')); if (p.ownerEmail !== prev.ownerEmail) changes.push('Email: ' + (prev.ownerEmail||'unknown') + ' → ' + (p.ownerEmail||'unknown')); if (changes.length) { if (!p.tl) p.tl = []; const today = new Date(); const dateStr = today.toISOString().split('T')[0]; const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; p.tl.push({ date:dateStr, type:'note', target:'owner-direct', notes:'Owner details updated — '+changes.join(' | '), resp:'none', prevValue:'', newValue:'' }); p.notes = (p.notes||'') + '\n' + stamp + ' OWNER UPDATED — ' + changes.join(' | '); const ta = document.getElementById('notesArea'); if (ta) { ta.value = p.notes; ta.scrollTop = ta.scrollHeight; } } save(); renderDetail(id); showToast('✓ Owner details saved and logged'); } function saveRightmove(id) { const p = byId(id); const urlEl = document.getElementById('rm_url_' + id); const newUrl = urlEl ? urlEl.value.trim() : (p.rmUrl || ''); const today = new Date(); const dateStr = today.toISOString().split('T')[0]; const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; const changes = []; if (newUrl !== (p.rmUrl||'')) changes.push('Rightmove URL saved: ' + newUrl); changes.push('Rightmove listing checked — 30-day reminder reset'); p.rmUrl = newUrl; p.rmLastChecked = dateStr; if (!p.tl) p.tl = []; p.tl.push({ date:dateStr, type:'research', target:'general', notes:changes.join(' | '), resp:'none', prevValue:'', newValue:'' }); p.notes = (p.notes||'') + '\n' + stamp + ' RIGHTMOVE CHECKED — ' + (newUrl ? newUrl : 'no URL saved'); const ta = document.getElementById('notesArea'); if (ta) { ta.value = p.notes; ta.scrollTop = ta.scrollHeight; } save(); renderDetail(id); showToast('✓ Rightmove check logged — reminder set for 30 days'); } function savePipeline(id) { const p = byId(id); const prev = { plSituation:p.plSituation||'', plAsking:p.plAsking||'', plOffer:p.plOffer||'', plNextContact:p.plNextContact||'' }; p.plSituation = (document.getElementById('pl_situation_' + id)||{}).value?.trim() || prev.plSituation; p.plAsking = (document.getElementById('pl_asking_' + id)||{}).value?.trim() || prev.plAsking; p.plOffer = (document.getElementById('pl_offer_' + id)||{}).value?.trim() || prev.plOffer; p.plNextContact = (document.getElementById('pl_nextContact_' + id)||{}).value || prev.plNextContact; const changes = []; if (p.plSituation !== prev.plSituation) changes.push('Vendor situation: ' + (p.plSituation||'—')); if (p.plAsking !== prev.plAsking) changes.push('Asking price: ' + (p.plAsking||'—')); if (p.plOffer !== prev.plOffer) changes.push('My offer: ' + (p.plOffer||'—')); if (p.plNextContact !== prev.plNextContact) changes.push('Next agreed contact: ' + (p.plNextContact ? fmtDate(p.plNextContact) : '—')); if (changes.length) { if (!p.tl) p.tl = []; const today = new Date(); const dateStr = today.toISOString().split('T')[0]; const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; p.tl.push({ date:dateStr, type:'note', target:'owner-direct', notes:'Deal details updated — '+changes.join(' | '), resp:'none', prevValue:'', newValue:'' }); p.notes = (p.notes||'') + '\n' + stamp + ' DEAL UPDATE — ' + changes.join(' | '); const ta = document.getElementById('notesArea'); if (ta) { ta.value = p.notes; ta.scrollTop = ta.scrollHeight; } } save(); renderDetail(id); showToast('✓ Deal details saved and logged'); } function saveAddr(id) { const p = byId(id); const el = document.getElementById('addrField_' + id); if (!el) return; const newAddr = el.value.trim(); if (!newAddr) { showToast('Address cannot be blank', true); return; } const prev = p.addr; if (newAddr === prev) { showToast('No change to address'); return; } p.addr = newAddr; const svLinkEl = document.getElementById('svLink_' + id); if (svLinkEl) p.svUrl = svLinkEl.href; if (!p.tl) p.tl = []; const today = new Date(); const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; p.tl.push({ date:today.toISOString().split('T')[0], type:'note', target:'general', notes:'Address corrected: '+prev+' → '+newAddr, resp:'none', prevValue:prev, newValue:newAddr }); p.notes = (p.notes||'') + '\n' + stamp + ' ADDRESS UPDATED: ' + prev + ' → ' + newAddr; save(); renderDetail(id); showToast('✓ Address updated and logged'); } function saveNeighbours(id) { const p = byId(id); const prev = { leftN:p.leftN||'', leftNC:p.leftNC||'', rightN:p.rightN||'', rightNC:p.rightNC||'' }; p.leftN = document.getElementById('nb_leftN_' + id).value.trim(); p.leftNC = document.getElementById('nb_leftNC_' + id).value.trim(); p.rightN = document.getElementById('nb_rightN_' + id).value.trim(); p.rightNC= document.getElementById('nb_rightNC_' + id).value.trim(); const changes = []; if (p.leftN !== prev.leftN) changes.push('Left neighbour: '+prev.leftN+' → '+p.leftN); if (p.leftNC !== prev.leftNC) changes.push('Left contact: '+prev.leftNC+' → '+p.leftNC); if (p.rightN !== prev.rightN) changes.push('Right neighbour: '+prev.rightN+' → '+p.rightN); if (p.rightNC!== prev.rightNC)changes.push('Right contact: '+prev.rightNC+' → '+p.rightNC); if (changes.length) { if (!p.tl) p.tl = []; const today = new Date(); const dateStr = today.toISOString().split('T')[0]; const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + ']'; p.tl.push({ date:dateStr, type:'note', target:'general', notes:'Neighbour details updated — '+changes.join(' | '), resp:'none', prevValue:'', newValue:'' }); p.notes = (p.notes||'') + '\n' + stamp + ' NEIGHBOURS UPDATED — ' + changes.join(' | '); const ta = document.getElementById('notesArea'); if (ta) { ta.value = p.notes; ta.scrollTop = ta.scrollHeight; } } save(); renderDetail(id); showToast('✓ Neighbour details saved and logged'); } function showToast(msg, isError) { const t = document.getElementById('toast'); t.textContent = msg || '✓ Saved'; t.className = 'toast' + (isError ? ' error' : ''); t.classList.add('show'); clearTimeout(window._toastTimer); window._toastTimer = setTimeout(() => t.classList.remove('show'), 2000); } function upd(id,k,v) { const p=byId(id); p[k]=v; save(); showToast('✓ Saved'); } function del(id) { if(!confirm('Delete this record? Cannot be undone.'))return; DB=DB.filter(p=>p.id!==id); activeId=null; save(); goBack(); } function delConfirm(id) { if(!confirm('Delete this lead? Cannot be undone.'))return; DB=DB.filter(p=>p.id!==id); if (activeId===id) activeId=null; save(); renderList(); } function setFilter(f,el) { filter=f; currentPage=1; document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active')); el.classList.add('active'); renderList(); } function setLT(t) { ltMode=t; document.getElementById('ltP').classList.toggle('on',t==='property'); document.getElementById('ltD').classList.toggle('on',t==='data'); document.getElementById('propFields').classList.toggle('hidden',t==='data'); document.getElementById('dataFields').classList.toggle('hidden',t==='property'); } function openNew() { document.getElementById('newModal').classList.remove('hidden'); document.getElementById('nAddr').value = ''; document.getElementById('nWhy').value = ''; const nt = document.getElementById('nTier'); if (nt) nt.value = '2'; const ss = document.getElementById('nStreetSearch'); if (ss) ss.value = ''; const res = document.getElementById('addrLookupResults'); if (res) res.style.display = 'none'; const err = document.getElementById('addrLookupError'); if (err) err.style.display = 'none'; const sel = document.getElementById('addrLookupSelect'); if (sel) sel.innerHTML = '<option value="">— Select the correct address —</option>'; const sv = document.getElementById('nStreetViewLink'); if (sv) sv.remove(); setLT('property'); } function closeNew() { document.getElementById('newModal').classList.add('hidden'); } function saveNew() { try { const addr = document.getElementById('nAddr').value.trim(); const why = document.getElementById('nWhy').value.trim(); if (!addr) { alert('Please enter a property address.'); return; } if (!why) { alert('Please fill in why you are contacting them.'); return; } const isD = ltMode === 'data'; const nTierEl = document.getElementById('nTier'); const nSrcEl = document.getElementById('nSrc'); const nIntelEl = document.getElementById('nIntel'); const p = { id: Date.now().toString(), addr, why, lt: ltMode, tier: isD ? '2' : (nTierEl ? nTierEl.value : '2'), phase: isD ? 'outreach' : 'phase1', src: (isD && nSrcEl) ? nSrcEl.value : null, intel: (isD && nIntelEl) ? nIntelEl.value : null, sf: [], tl: [], attachments: [], created: new Date().toISOString().split('T')[0], ownerName:'', ownerAddr:'', ownerPhone:'', ownerEmail:'', leftN:'', leftNC:'', rightN:'', rightNC:'', notes:'' }; const today = new Date(); const stamp = '[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + '] '; p.notes = stamp + why; const svNewEl = document.getElementById('nStreetViewLink'); if (svNewEl) p.svUrl = svNewEl.href; DB.unshift(p); save(); closeNew(); renderList(); sel(p.id); } catch(err) { alert('Error saving: ' + err.message); console.error(err); } } let editingLogIdx = null; function openLog(idx) { editingLogIdx = (typeof idx === 'number') ? idx : null; const p = byId(activeId); if (editingLogIdx !== null && p && p.tl && p.tl[editingLogIdx]) { const e = p.tl[editingLogIdx]; document.getElementById('lDate').value = e.date || new Date().toISOString().split('T')[0]; document.getElementById('lType').value = e.type || 'letter'; document.getElementById('lTarget').value = e.target || 'neighbour-both'; document.getElementById('lNotes').value = e.notes || ''; document.getElementById('lResp').value = e.resp || 'none'; document.getElementById('logModalTitle').textContent = 'Edit Action'; } else { document.getElementById('lDate').value = new Date().toISOString().split('T')[0]; document.getElementById('lNotes').value = ''; document.getElementById('lResp').value = 'none'; document.getElementById('logModalTitle').textContent = 'Log Action'; const tl = (p && p.tl) || []; const phase = p ? p.phase : 'phase1'; const lt = p ? p.lt : 'property'; const neighbourLetters = tl.filter(a => a.type==='letter' && (a.target==='neighbour-both'||a.target==='neighbour-left'||a.target==='neighbour-right')); const targetLetters = tl.filter(a => a.type==='letter' && a.target==='target-address'); const researchDone = tl.filter(a => a.type==='research'); const registryDone = tl.filter(a => a.type==='registry'); let defaultType = 'letter', defaultTarget = 'neighbour-both'; if (lt === 'data') { defaultType = tl.length===0 ? 'letter' : (tl.some(a=>a.type==='call') ? 'note' : 'call'); defaultTarget = 'owner-direct'; } else if (phase==='phase1') { defaultType='letter'; defaultTarget=!neighbourLetters.length?'neighbour-both':'target-address'; } else if (phase==='phase2') { defaultType='research'; defaultTarget='general'; } else if (phase==='phase3') { defaultType=!registryDone.length?'registry':'call'; defaultTarget=!registryDone.length?'general':'owner-direct'; } else if (phase==='pipeline') { defaultType='call'; defaultTarget='owner-direct'; } else if (phase==='outreach') { defaultType='letter'; defaultTarget='owner-direct'; } document.getElementById('lType').value = defaultType; document.getElementById('lTarget').value = defaultTarget; } document.getElementById('logModal').classList.remove('hidden'); } function closeLog() { document.getElementById('logModal').classList.add('hidden'); editingLogIdx=null; } function saveLog(editIdx) { if(!activeId)return; const p=byId(activeId); if(!p.tl)p.tl=[]; const d=document.getElementById('lDate').value; const type=document.getElementById('lType').value; const target=document.getElementById('lTarget').value; const notes=document.getElementById('lNotes').value.trim(); const resp=document.getElementById('lResp').value; const e={date:d, type, target, notes, resp, prevValue:'', newValue:''}; const isEdit = (typeof editIdx === 'number'); if (isEdit) { p.tl[editIdx] = e; } else { p.tl.push(e); const today = new Date(d); const stamp = '\n[' + today.getDate().toString().padStart(2,'0') + '/' + (today.getMonth()+1).toString().padStart(2,'0') + '/' + today.getFullYear() + '] ' + type.toUpperCase() + ' → ' + target.replace(/-/g,' '); const detail = notes ? ' — ' + notes : ''; const respNote = resp && resp !== 'none' ? ' (' + resp.replace(/-/g,' ') + ')' : ''; p.notes = (p.notes || '') + stamp + detail + respNote; } if (e.resp==='confirmed-empty' && !(p.sf||[]).includes('confirmed_empty')) { if(!p.sf)p.sf=[]; p.sf.push('confirmed_empty'); } if (e.resp==='owner-name' && !(p.sf||[]).includes('owner_name')) { if(!p.sf)p.sf=[]; p.sf.push('owner_name'); } if (e.resp === 'owner-contact') { p.phase = 'pipeline'; } else if (e.resp === 'not-selling') { p.phase='review'; const d2=new Date(); d2.setFullYear(d2.getFullYear()+1); p.revDate=d2.toISOString().split('T')[0]; } else if (e.resp === 'not-empty') { p.phase='review'; const d3=new Date(); d3.setMonth(d3.getMonth()+6); p.revDate=d3.toISOString().split('T')[0]; } else if (p.lt !== 'data') { const allActions = p.tl; const nL = allActions.filter(a => a.type==='letter' && (a.target==='neighbour-both'||a.target==='neighbour-left'||a.target==='neighbour-right')); const tL = allActions.filter(a => a.type==='letter' && a.target==='target-address'); const rD = allActions.filter(a => a.type==='research'); if (p.phase==='phase1' && nL.length>0 && tL.length>0) p.phase='phase2'; else if (p.phase==='phase2' && rD.length>0) p.phase='phase3'; } save(); closeLog(); const notesSnapshot = p.notes || ''; renderDetail(activeId); const ta = document.getElementById('notesArea'); if (ta) { ta.value = notesSnapshot; ta.scrollTop = ta.scrollHeight; } showToast('✓ Action logged — notes updated'); } function exportData() { const esc = v => '"' + (v||'').toString().replace(/"/g,'""') + '"'; const fmtTL = tl => (tl||[]).map(t => '['+t.date+'] '+(t.type||'').toUpperCase()+' → '+(t.target||'')+(t.notes?' — '+t.notes:'')+(t.resp&&t.resp!=='none'?' ('+t.resp+')':'')).join(' | '); const headers = ['Address','Lead Type','Why Contacting','Tier','Phase','Score','Rightmove URL','RM Last Checked','Owner Name','Owner Address','Owner Phone','Owner Email','Left Neighbour','Left Neighbour Contact','Right Neighbour','Right Neighbour Contact','Data Source','Owner Intel','Score Factors','Vendor Situation','Asking Price','My Offer','Next Agreed Contact','Notes','Timeline (all actions)','Total Actions','Created Date','Closed','Closed Date','Review Date']; const rows = [headers.join(',')]; DB.forEach(p => { const row = [esc(p.addr),esc(p.lt),esc(p.why),esc(p.tier),esc(p.phase),score(p),esc(p.rmUrl),esc(p.rmLastChecked),esc(p.ownerName),esc(p.ownerAddr),esc(p.ownerPhone),esc(p.ownerEmail),esc(p.leftN),esc(p.leftNC),esc(p.rightN),esc(p.rightNC),esc(p.src),esc(p.intel),esc((p.sf||[]).join(', ')),esc(p.plSituation),esc(p.plAsking),esc(p.plOffer),esc(p.plNextContact),esc(p.notes),esc(fmtTL(p.tl)),(p.tl||[]).length,esc(p.created),p.closed?'YES':'NO',esc(p.closedDate),esc(p.revDate)]; rows.push(row.join(',')); }); const blob = new Blob([rows.join('\n')], {type:'text/csv;charset=utf-8;'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'dtv-crm-' + new Date().toISOString().split('T')[0] + '.csv'; a.click(); } function formatNominatimResult(a) { const parts = []; if (a.address.house_number) parts.push(a.address.house_number); if (a.address.road) parts.push(a.address.road); if (a.address.suburb) parts.push(a.address.suburb); if (a.address.town || a.address.city || a.address.village) parts.push(a.address.town || a.address.city || a.address.village); if (a.address.postcode) parts.push(a.address.postcode); return parts.filter(Boolean).join(', '); } async function lookupAddress() { const q = document.getElementById('nStreetSearch').value.trim(); const errEl = document.getElementById('addrLookupError'); const resEl = document.getElementById('addrLookupResults'); const selEl = document.getElementById('addrLookupSelect'); errEl.style.display='none'; resEl.style.display='none'; if (!q) { errEl.textContent='Enter a house number and street name first.'; errEl.style.display='block'; return; } errEl.textContent='Searching...'; errEl.style.display='block'; try { const resp = await fetch('https://nominatim.openstreetmap.org/search?q='+encodeURIComponent(q+', UK')+'&format=json&addressdetails=1&limit=10&countrycodes=gb', {headers:{'Accept-Language':'en-GB','User-Agent':'DTV-CRM/1.0'}}); const results = await resp.json(); errEl.style.display='none'; if (!results.length) { errEl.textContent='No results found — try adding the town name'; errEl.style.display='block'; return; } selEl.innerHTML='<option value="">— Select the correct address —</option>'; results.forEach(a => { const opt=document.createElement('option'); opt.value=formatNominatimResult(a); opt.textContent=formatNominatimResult(a); if(a.lat)opt.setAttribute('data-lat',a.lat); if(a.lon)opt.setAttribute('data-lng',a.lon); selEl.appendChild(opt); }); resEl.style.display='block'; } catch(e) { errEl.textContent='Search failed — check connection or enter manually.'; errEl.style.display='block'; } } function selectLookupAddress() { const sel = document.getElementById('addrLookupSelect'); const val = sel.value; if (!val) return; document.getElementById('nAddr').value = val; const opt = sel.options[sel.selectedIndex]; const lat=opt.getAttribute('data-lat'); const lng=opt.getAttribute('data-lng'); if (lat && lng) { const svUrl='https://www.google.com/maps/@?api=1&map_action=pano&viewpoint='+lat+','+lng; let existing=document.getElementById('nStreetViewLink'); if (!existing) { existing=document.createElement('a'); existing.id='nStreetViewLink'; existing.target='_blank'; existing.style.cssText='display:inline-block;margin-top:6px;font-family:DM Mono;font-size:0.65rem;padding:6px 12px;background:rgba(66,133,244,0.15);color:#6ba3d6;border:1px solid rgba(66,133,244,0.3);text-decoration:none;'; document.getElementById('nAddr').parentNode.appendChild(existing); } existing.href=svUrl; existing.textContent='📍 View on Street View'; } } async function lookupAddressDetail(id) { const q=document.getElementById('addrSearch_'+id).value.trim(); const errEl=document.getElementById('addrError_'+id); const resEl=document.getElementById('addrResults_'+id); const selEl=document.getElementById('addrSelect_'+id); errEl.style.display='none'; resEl.style.display='none'; if (!q) { errEl.textContent='Enter a house number and street name first.'; errEl.style.display='block'; return; } errEl.textContent='Searching...'; errEl.style.display='block'; try { const resp = await fetch('https://nominatim.openstreetmap.org/search?q='+encodeURIComponent(q+', UK')+'&format=json&addressdetails=1&limit=10&countrycodes=gb',{headers:{'Accept-Language':'en-GB','User-Agent':'DTV-CRM/1.0'}}); const results = await resp.json(); errEl.style.display='none'; if (!results.length) { errEl.textContent='No results — try adding town name'; errEl.style.display='block'; return; } selEl.innerHTML='<option value="">— Select address —</option>'; results.forEach(a => { const opt=document.createElement('option'); opt.value=formatNominatimResult(a); opt.textContent=formatNominatimResult(a); if(a.lat)opt.setAttribute('data-lat',a.lat); if(a.lon)opt.setAttribute('data-lng',a.lon); selEl.appendChild(opt); }); resEl.style.display='block'; } catch(e) { errEl.textContent='Search failed — enter manually.'; errEl.style.display='block'; } } function selectAddressDetail(id) { const sel=document.getElementById('addrSelect_'+id); const val=sel.value; if (!val) return; document.getElementById('addrField_'+id).value=val; const opt=sel.options[sel.selectedIndex]; const lat=opt.getAttribute('data-lat'); const lng=opt.getAttribute('data-lng'); if (lat && lng) { const svUrl='https://www.google.com/maps/@?api=1&map_action=pano&viewpoint='+lat+','+lng; const svId='svLink_'+id; let existing=document.getElementById(svId); if (!existing) { existing=document.createElement('a'); existing.id=svId; existing.target='_blank'; existing.style.cssText='display:inline-block;margin-top:6px;margin-bottom:4px;font-family:DM Mono;font-size:0.65rem;padding:6px 12px;background:rgba(66,133,244,0.15);color:#6ba3d6;border:1px solid rgba(66,133,244,0.3);text-decoration:none;'; document.getElementById('addrField_'+id).parentNode.appendChild(existing); } existing.href=svUrl; existing.textContent='📍 View on Street View'; } } function parseCSVFull(text) { const rows=[]; let row=[],field='',inQuotes=false; for (let i=0;i<text.length;i++) { const ch=text[i],next=text[i+1]; if (ch==='"') { if(inQuotes&&next==='"'){field+='"';i++;}else inQuotes=!inQuotes; } else if (ch===','&&!inQuotes) { row.push(field.trim());field=''; } else if ((ch==='\n'||(ch==='\r'&&next==='\n'))&&!inQuotes) { if(ch==='\r')i++; row.push(field.trim()); if(row.some(f=>f.length>0))rows.push(row); row=[];field=''; } else { field+=ch; } } if (field.length||row.length) { row.push(field.trim()); if(row.some(f=>f.length>0))rows.push(row); } return rows; } function importCSV(event) { const file=event.target.files[0]; if(!file)return; const reader=new FileReader(); reader.onload=function(e) { try { const allRows=parseCSVFull(e.target.result); if (allRows.length<2){showToast('CSV appears empty',true);return;} const headers=allRows[0]; const hi={};headers.forEach((h,i)=>{hi[h.trim().toLowerCase()]=i;}); const col=(vals,name,fallback)=>{const idx=hi[name.toLowerCase()];return(idx!==undefined&&vals[idx]!==undefined)?vals[idx].trim():(fallback||'');}; let imported=0,merged=0,blank=0; for (let i=1;i<allRows.length;i++) { const vals=allRows[i]; const addr=(vals[0]||'').trim(); if (!addr){blank++;continue;} if (addr.toLowerCase()==='address'){blank++;continue;} // Build the incoming fields from CSV const incoming={ addr, lt: col(vals,'lead type','property'), why: col(vals,'why contacting',''), tier: col(vals,'tier','2'), phase: col(vals,'phase','phase1'), ownerName: col(vals,'owner name',''), ownerAddr: col(vals,'owner address',''), ownerPhone: col(vals,'owner phone',''), ownerEmail: col(vals,'owner email',''), leftN: col(vals,'left neighbour',''), leftNC: col(vals,'left neighbour contact',''), rightN: col(vals,'right neighbour',''), rightNC: col(vals,'right neighbour contact',''), src: col(vals,'data source',null)||null, intel: col(vals,'owner intel',null)||null, plSituation: col(vals,'vendor situation',''), plAsking: col(vals,'asking price',''), plOffer: col(vals,'my offer',''), plNextContact:col(vals,'next agreed contact',''), notes: col(vals,'notes',''), closed: col(vals,'closed','NO').toUpperCase()==='YES', closedDate: col(vals,'closed date',''), revDate: col(vals,'review date',''), created: col(vals,'created date',new Date().toISOString().split('T')[0]), }; const sfRaw=col(vals,'score factors',''); incoming.sf = sfRaw ? sfRaw.split(',').map(s=>s.trim()).filter(Boolean) : []; // Check for duplicate by address (case-insensitive) OR owner name if present const incomingName = incoming.ownerName.toLowerCase().trim(); const exists = DB.find(p => { const addrMatch = (p.addr||'').toLowerCase().trim() === addr.toLowerCase(); const nameMatch = incomingName && incomingName.length > 2 && (p.ownerName||'').toLowerCase().trim() === incomingName; return addrMatch || nameMatch; }); if (exists) { // MERGE: update all flat fields from CSV, preserve CRM activity exists.addr = incoming.addr; exists.lt = incoming.lt; exists.why = incoming.why || exists.why; exists.tier = incoming.tier; exists.phase = incoming.phase; exists.ownerName = incoming.ownerName || exists.ownerName; exists.ownerAddr = incoming.ownerAddr || exists.ownerAddr; exists.ownerPhone = incoming.ownerPhone || exists.ownerPhone; exists.ownerEmail = incoming.ownerEmail || exists.ownerEmail; exists.leftN = incoming.leftN || exists.leftN; exists.leftNC = incoming.leftNC || exists.leftNC; exists.rightN = incoming.rightN || exists.rightN; exists.rightNC = incoming.rightNC || exists.rightNC; exists.src = incoming.src || exists.src; exists.intel = incoming.intel || exists.intel; exists.plSituation = incoming.plSituation || exists.plSituation; exists.plAsking = incoming.plAsking || exists.plAsking; exists.plOffer = incoming.plOffer || exists.plOffer; exists.plNextContact= incoming.plNextContact || exists.plNextContact; exists.closed = incoming.closed; exists.closedDate = incoming.closedDate || exists.closedDate; exists.revDate = incoming.revDate || exists.revDate; exists.sf = incoming.sf.length ? incoming.sf : exists.sf; // Merge notes: append incoming notes if they contain content not already in existing notes if (incoming.notes && !exists.notes.includes(incoming.notes.trim().slice(0,40))) { exists.notes = incoming.notes + (exists.notes ? '\n\n── Previous CRM notes ──\n' + exists.notes : ''); } // Preserve: tl (timeline), attachments — never overwritten merged++; } else { // New record const p = Object.assign({ id:Date.now().toString()+'_'+i, tl:[], attachments:[] }, incoming); DB.push(p); imported++; } } save(); renderList(); showToast('✓ ' + (imported?imported+' new lead'+(imported!==1?'s':'')+' added':'') + (imported&&merged?' · ':'') + (merged?merged+' existing record'+(merged!==1?'s':'')+' updated':'') + (blank?' · '+blank+' blank rows ignored':'') || '✓ Import complete'); event.target.value=''; } catch(err) { showToast('Import failed: '+err.message,true); console.error(err); } }; reader.readAsText(file); } renderList(); </script> <div class="toast" id="toast"></div> <div id="dtv-tooltip"></div> <script> (function() { const tip = document.getElementById('dtv-tooltip'); let hideTimer; document.addEventListener('mouseover', function(e) { const el = e.target.closest('[data-tip]'); if (!el) return; clearTimeout(hideTimer); tip.textContent = el.getAttribute('data-tip'); tip.style.display = 'block'; positionTip(e); }); document.addEventListener('mousemove', function(e) { if (!e.target.closest('[data-tip]')) return; positionTip(e); }); document.addEventListener('mouseout', function(e) { const el = e.target.closest('[data-tip]'); if (!el) return; hideTimer = setTimeout(() => { tip.style.display = 'none'; }, 100); }); function positionTip(e) { const pad=12,tw=tip.offsetWidth,th=tip.offsetHeight; let x=e.clientX+pad,y=e.clientY-th-pad; if (x+tw>window.innerWidth-pad) x=e.clientX-tw-pad; if (y<pad) y=e.clientY+pad; tip.style.left=x+'px'; tip.style.top=y+'px'; } })(); </script> </body> </html>" >
