SalesCRM \u2014 Full Functional (local)<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root{--primary:#4361ee;--secondary:#3f37c9;--success:#4cc9f0;--light:#f8f9fa;--dark:#212529;--sidebar-width:250px;--header-height:60px}\n *{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif}\n body{display:flex;min-height:100vh;background:#f5f7fb;color:var(--dark)}\n .sidebar{width:var(--sidebar-width);background:linear-gradient(180deg,var(--primary),var(--secondary));color:#fff;height:100vh;position:fixed;z-index:1000;padding-bottom:30px}\n .sidebar-header{padding:20px;display:flex;align-items:center}\n .sidebar-header h3{margin-left:10px}\n .sidebar-menu{padding:15px 0}\n .sidebar-menu ul{list-style:none}\n .sidebar-menu li{padding:12px 20px;transition:all .2s;display:flex;align-items:center;gap:10px}\n .sidebar-menu li:hover{background:rgba(255,255,255,.08);cursor:pointer}\n .sidebar-menu li.active{background:rgba(255,255,255,.12);border-left:4px solid rgba(255,255,255,.3)}\n .main-content{flex:1;margin-left:var(--sidebar-width)}\n .header{height:var(--header-height);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:100}\n .content{padding:20px}\n .card{background:#fff;border-radius:10px;padding:18px;box-shadow:0 4px 6px rgba(0,0,0,.06)}\n .dashboard-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:20px}\n table{width:100%;border-collapse:collapse}\n th,td{padding:12px;border-bottom:1px solid #eef2f6;text-align:left}\n th{background:#f8f9fa}\n .badge{padding:6px 10px;border-radius:20px;font-size:.78rem}\n .btn{padding:8px 12px;border-radius:6px;border:none;cursor:pointer}\n .btn-primary{background:var(--primary);color:#fff}\n .btn-success{background:#28a745;color:#fff}\n .flex{display:flex;gap:12px;align-items:center}\n .table-responsive{overflow-x:auto}\n .module-section{margin-bottom:20px}\n .whatsapp-btn{background:#25d366;color:#fff;border-radius:6px;padding:6px 10px;border:none;cursor:pointer}\n \/* modal *\/\n .modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:2000}\n .modal.show{display:flex}\n .modal-card{width:100%;max-width:760px;background:#fff;border-radius:8px;padding:18px}\n .form-group{margin-bottom:12px}\n .form-control{width:100%;padding:10px;border:1px solid #ced4da;border-radius:6px}\n .kanban-board{display:flex;gap:12px;overflow-x:auto;padding-top:10px}\n .kanban-column{min-width:260px;background:#f8f9fa;padding:12px;border-radius:8px}\n .kanban-item{background:#fff;padding:10px;border-radius:8px;margin-bottom:10px;cursor:grab}\n .kanban-item.dragging{opacity:0.5}\n .search-input{padding:8px 12px;border-radius:8px;border:1px solid #ddd;width:260px}\n .small{font-size:.85rem;color:#6c757d}\n .truncate{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n @media(max-width:768px){.sidebar{width:70px}.sidebar-header h3,.sidebar-menu span{display:none}.main-content{margin-left:70px}}\n <\/style>\n<\/head>\n<body>\n <div class=\"sidebar\">\n <div class=\"sidebar-header\"><i class=\"fas fa-chart-line fa-2x\"><\/i><h3>SalesCRM<\/h3><\/div>\n <div class=\"sidebar-menu\">\n <ul>\n <li class=\"active\" data-view=\"dashboard\"><i class=\"fas fa-home\"><\/i><span>Dashboard<\/span><\/li>\n <li data-view=\"leads\"><i class=\"fas fa-users\"><\/i><span>Leads & Contacts<\/span><\/li>\n <li data-view=\"pipeline\"><i class=\"fas fa-project-diagram\"><\/i><span>Pipeline<\/span><\/li>\n <li data-view=\"products\"><i class=\"fas fa-box\"><\/i><span>Product Catalog<\/span><\/li>\n <li data-view=\"tasks\"><i class=\"fas fa-tasks\"><\/i><span>Tasks<\/span><\/li>\n <li data-view=\"settings\"><i class=\"fas fa-cog\"><\/i><span>Settings<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <div class=\"header\">\n <div style=\"display:flex;gap:12px;align-items:center\">\n <h1 style=\"font-size:1.2rem;color:var(--primary);margin-right:6px\">SalesCRM<\/h1>\n <input class=\"search-input\" id=\"globalSearch\" placeholder=\"Search leads, products, tasks...\" \/>\n <\/div>\n <div class=\"flex\">\n <button class=\"btn\" id=\"exportBtn\"><i class=\"fas fa-file-export\"><\/i> Export JSON<\/button>\n <button class=\"btn\" id=\"importBtn\"><i class=\"fas fa-file-import\"><\/i> Import JSON<\/button>\n <div class=\"user-profile flex\"><img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?img=32\" style=\"width:36px;height:36px;border-radius:50%\"\/><div class=\"small\">John Doe<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"content\">\n \n <div id=\"view-dashboard\" class=\"view\">\n <div class=\"dashboard-cards\">\n <div class=\"card\"><div class=\"small\">Total Leads<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-leads\">0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Pipeline Value<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-value\">$0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Pending Tasks<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-tasks\">0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Products<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-products\">0<\/div><\/div>\n <\/div>\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Recent Leads<\/h3><div><button class=\"btn btn-primary\" id=\"addLeadBtn\"><i class=\"fas fa-plus\"><\/i> Add Lead<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"leadsTable\"><thead><tr><th>Name<\/th><th>Company<\/th><th>Email<\/th><th>Phone<\/th><th>Value<\/th><th>Status<\/th><th>Last Contact<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-leads\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Leads & Contacts<\/h3><div><button class=\"btn btn-primary\" id=\"addLeadBtn2\"><i class=\"fas fa-plus\"><\/i> Add Lead<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"leadsTableFull\"><thead><tr><th>Name<\/th><th>Company<\/th><th>Email<\/th><th>Phone<\/th><th>Value<\/th><th>Status<\/th><th>Last Contact<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-pipeline\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Pipeline (Drag leads between stages)<\/h3><div><\/div><\/div>\n <div class=\"kanban-board\" id=\"pipelineBoard\">\n <div class=\"kanban-column\" data-stage=\"New\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">New<\/div><div class=\"column-body\" data-stage=\"New\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Contacted\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Contacted<\/div><div class=\"column-body\" data-stage=\"Contacted\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Qualified\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Qualified<\/div><div class=\"column-body\" data-stage=\"Qualified\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Proposal\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Proposal<\/div><div class=\"column-body\" data-stage=\"Proposal\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Negotiation\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Negotiation<\/div><div class=\"column-body\" data-stage=\"Negotiation\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Closed\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Closed<\/div><div class=\"column-body\" data-stage=\"Closed\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-products\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Product Catalog<\/h3><div><button class=\"btn btn-primary\" id=\"addProductBtn\"><i class=\"fas fa-plus\"><\/i> Add Product<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"productsTable\"><thead><tr><th>Product<\/th><th>Category<\/th><th>Price<\/th><th>Stock<\/th><th>Status<\/th><th>Description<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tasks\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Tasks & Follow-ups<\/h3><div><button class=\"btn btn-primary\" id=\"addTaskBtn\"><i class=\"fas fa-plus\"><\/i> Add Task<\/button><\/div><\/div>\n <div class=\"kanban-board\" id=\"tasksBoard\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"view-settings\" class=\"view\" style=\"display:none\">\n <div class=\"card\"><h3 style=\"color:var(--primary)\">Settings<\/h3>\n <p class=\"small\">This demo stores data in your browser’s localStorage. Use Export\/Import to backup or move data between devices.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"modalLead\">\n <div class=\"modal-card\">\n <h3 id=\"modalLeadTitle\">Add Lead<\/h3>\n <div class=\"form-group\"><label>Name<\/label><input class=\"form-control\" id=\"lead_name\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Company<\/label><input class=\"form-control\" id=\"lead_company\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Phone<\/label><input class=\"form-control\" id=\"lead_phone\" \/><\/div><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Email<\/label><input class=\"form-control\" id=\"lead_email\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Value ($)<\/label><input class=\"form-control\" id=\"lead_value\" type=\"number\" \/><\/div><\/div>\n <div class=\"form-group\"><label>Status<\/label><select id=\"lead_status\" class=\"form-control\"><option>New<\/option><option>Contacted<\/option><option>Qualified<\/option><option>Proposal<\/option><option>Negotiation<\/option><option>Closed<\/option><\/select><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeLeadModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveLeadBtn\">Save Lead<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalProduct\">\n <div class=\"modal-card\">\n <h3 id=\"modalProductTitle\">Add Product<\/h3>\n <div class=\"form-group\"><label>Product Name<\/label><input class=\"form-control\" id=\"product_name\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Category<\/label><input class=\"form-control\" id=\"product_category\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Price<\/label><input class=\"form-control\" id=\"product_price\" type=\"number\" \/><\/div><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Stock<\/label><input class=\"form-control\" id=\"product_stock\" type=\"number\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Status<\/label><select id=\"product_status\" class=\"form-control\"><option>Active<\/option><option>Limited<\/option><option>Inactive<\/option><\/select><\/div><\/div>\n <div class=\"form-group\"><label>Description<\/label><textarea id=\"product_desc\" class=\"form-control\" rows=\"4\" placeholder=\"Short product description\"><\/textarea><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeProductModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveProductBtn\">Save Product<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalTask\">\n <div class=\"modal-card\">\n <h3 id=\"modalTaskTitle\">Add Task<\/h3>\n <div class=\"form-group\"><label>Title<\/label><input class=\"form-control\" id=\"task_title\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Related To (Lead name)<\/label><input class=\"form-control\" id=\"task_related\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Due Date<\/label><input class=\"form-control\" id=\"task_due\" type=\"datetime-local\" \/><\/div><\/div>\n <div class=\"form-group\"><label>Stage<\/label><select id=\"task_stage\" class=\"form-control\"><option>To Do<\/option><option>In Progress<\/option><option>Completed<\/option><\/select><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeTaskModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveTaskBtn\">Save Task<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalProductView\">\n <div class=\"modal-card\">\n <h3 id=\"modalProductViewTitle\">Product<\/h3>\n <div id=\"productViewBody\"><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeProductView\">Close<\/button><button class=\"btn whatsapp-btn\" id=\"shareProductWhatsapp\">Share via WhatsApp<\/button><\/div>\n <\/div>\n <\/div>\n\n <input type=\"file\" id=\"importFile\" accept=\"application\/json\" style=\"display:none\" \/>\n\n <script>\n \/\/ --- Data model in localStorage ---\n const STORAGE_KEY = 'salescrm_data_v1';\n let state = { leads: [], products: [], tasks: [] };\n let currentViewingProduct = null;\n\n function loadState(){\n try{const raw = localStorage.getItem(STORAGE_KEY); if(raw){state=JSON.parse(raw);} else {seedDemo(); saveState();}}\n catch(e){console.error('failed load',e);seedDemo();saveState();}\n }\n function saveState(){localStorage.setItem(STORAGE_KEY,JSON.stringify(state));renderAll();}\n\n function seedDemo(){state = {\n leads:[\n {id:id(),name:'Sarah Johnson',company:'Tech Solutions Inc.',email:'sarah@techsolutions.com',phone:'+15551234567',value:12500,status:'Contacted',lastContact:new Date().toISOString()},\n {id:id(),name:'Michael Chen',company:'Global Enterprises',email:'michael@globalent.com',phone:'+15559876543',value:8200,status:'Qualified',lastContact:new Date().toISOString()},\n {id:id(),name:'Emily Rodriguez',company:'Innovate Labs',email:'emily@innovatelabs.com',phone:'+15554567890',value:15000,status:'New',lastContact:new Date().toISOString()},\n ],\n products:[\n {id:id(),name:'Premium Business Suite',category:'Software',price:299.99,stock:'Unlimited',status:'Active',description:'Full-featured business suite: CRM, invoicing, and analytics.'},\n {id:id(),name:'Enterprise CRM License',category:'Software',price:499.99,stock:45,status:'Active',description:'Enterprise-grade CRM license with advanced reporting and SSO.'},\n {id:id(),name:'Basic Support Package',category:'Service',price:99.99,stock:'Unlimited',status:'Limited',description:'Email support and basic troubleshooting for one year.'}\n ],\n tasks:[\n {id:id(),title:'Follow up with Sarah Johnson',related:'Sarah Johnson',due:new Date().toISOString(),stage:'To Do'},\n {id:id(),title:'Prepare Q2 Sales Report',related:'',due:new Date().toISOString(),stage:'In Progress'}\n ]\n }}\n\n function id(){return Math.random().toString(36).slice(2,9)}\n\n \/\/ --- Rendering ---\n function renderAll(){renderStats();renderLeads();renderProducts();renderTasks();renderPipeline();}\n\n function renderStats(){document.getElementById('stat-leads').innerText = state.leads.length;document.getElementById('stat-products').innerText = state.products.length;document.getElementById('stat-tasks').innerText = state.tasks.filter(t=>t.stage!=='Completed').length;let total = state.leads.reduce((s,l)=>s+(Number(l.value)||0),0);document.getElementById('stat-value').innerText = '$' + numberWithCommas(total.toFixed(2));}\n\n function numberWithCommas(x){return x.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g,\",\")}\n\n function renderLeads(){const tbody=document.querySelector('#leadsTable tbody');const tbody2=document.querySelector('#leadsTableFull tbody');tbody.innerHTML='';tbody2.innerHTML='';const q = (document.getElementById('globalSearch').value||'').toLowerCase();state.leads.forEach(lead=>{if(q && !(lead.name+lead.company+lead.email+lead.phone).toLowerCase().includes(q)) return;const row = document.createElement('tr');row.innerHTML = `<td>${escapeHtml(lead.name)}<\/td><td>${escapeHtml(lead.company)}<\/td><td>${escapeHtml(lead.email)}<\/td><td>${escapeHtml(lead.phone)}<\/td><td>$${numberWithCommas(Number(lead.value||0).toFixed(2))}<\/td><td><span class=\"badge\">${lead.status}<\/span><\/td><td class=\"small\">${timeAgo(lead.lastContact)}<\/td><td><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"editLead\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"deleteLead\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"waLead\"><i class=\"fab fa-whatsapp\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"nudgeLead\" title=\"Send nudge via WhatsApp\"><i class=\"fas fa-bell\"><\/i><\/button><\/td>`;tbody.appendChild(row);\n const r2=row.cloneNode(true);tbody2.appendChild(r2);\n });\n }\n\n function renderProducts(){const tbody=document.querySelector('#productsTable tbody');tbody.innerHTML='';const q=(document.getElementById('globalSearch').value||'').toLowerCase();state.products.forEach(p=>{if(q && !(p.name+p.category+p.description).toLowerCase().includes(q)) return;const row=document.createElement('tr');row.innerHTML=`<td>${escapeHtml(p.name)}<\/td><td>${escapeHtml(p.category)}<\/td><td>$${numberWithCommas(Number(p.price).toFixed(2))}<\/td><td>${escapeHtml(String(p.stock))}<\/td><td><span class=\"badge\">${escapeHtml(p.status)}<\/span><\/td><td class=\"truncate\">${escapeHtml(p.description||'')}<\/td><td><button class=\"btn\" data-id=\"${p.id}\" data-action=\"viewProduct\"><i class=\"fas fa-eye\"><\/i><\/button><button class=\"btn\" data-id=\"${p.id}\" data-action=\"editProduct\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-id=\"${p.id}\" data-action=\"deleteProduct\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><button class=\"btn whatsapp-btn\" data-id=\"${p.id}\" data-action=\"shareProduct\"><i class=\"fab fa-whatsapp\"><\/i><\/button><\/td>`;tbody.appendChild(row)})}\n\n function renderTasks(){const board=document.getElementById('tasksBoard');board.innerHTML='';const groups = ['To Do','In Progress','Completed'];groups.forEach(g=>{const col=document.createElement('div');col.className='kanban-column';col.style.minWidth='260px';col.innerHTML=`<div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">${g}<\/div>`;const body=document.createElement('div');state.tasks.filter(t=>t.stage===g).forEach(task=>{const item=document.createElement('div');item.className='kanban-item';item.draggable=true;item.dataset.id=task.id;item.innerHTML=`<div style=\"font-weight:600\">${escapeHtml(task.title)}<\/div><div class=\"small\">${escapeHtml(task.related)}<\/div><div class=\"small\">Due: ${task.due?new Date(task.due).toLocaleString():'-'}<\/div><div style=\"margin-top:6px\"><button class=\"btn\" data-action=\"editTask\" data-id=\"${task.id}\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-action=\"deleteTask\" data-id=\"${task.id}\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><\/div>`;body.appendChild(item)}) ;col.appendChild(body);board.appendChild(col)});\n \/\/ add drag\/drop for tasks board\n board.querySelectorAll('.kanban-item').forEach(i=>{\n i.addEventListener('dragstart', e=>{e.dataTransfer.setData('text\/plain', i.dataset.id)})\n });\n board.querySelectorAll('.kanban-column').forEach(col=>{\n col.addEventListener('dragover', e=>e.preventDefault());\n col.addEventListener('drop', e=>{e.preventDefault();const id=e.dataTransfer.getData('text\/plain');const stage = col.querySelector('div').innerText;const t = state.tasks.find(x=>x.id===id);if(t){t.stage=stage;saveState();}\n })\n });\n }\n\n function renderPipeline(){const cols = document.querySelectorAll('#pipelineBoard .column-body');cols.forEach(c=>c.innerHTML=''); ['New','Contacted','Qualified','Proposal','Negotiation','Closed'].forEach(stage=>{const container = document.querySelector(`#pipelineBoard .column-body[data-stage='${stage}']`) || document.querySelector(`#pipelineBoard .column-body`);const items = state.leads.filter(l=>l.status===stage);items.forEach(it=>{const el = document.createElement('div');el.className='kanban-item';el.draggable=true;el.dataset.id=it.id;el.innerHTML=`<div style=\"font-weight:600\">${escapeHtml(it.name)}<\/div><div class=\"small\">${escapeHtml(it.company)}<\/div><div class=\"small\">Value: $${numberWithCommas(Number(it.value||0).toFixed(2))}<\/div><div style=\"margin-top:6px\"><button class=\"btn\" data-action=\"viewLead\" data-id=\"${it.id}\"><i class=\"fas fa-eye\"><\/i><\/button><\/div>`;container.appendChild(el)})})\n \/\/ enable drag\/drop for pipeline columns\n document.querySelectorAll('#pipelineBoard .kanban-item').forEach(i=>{\n i.addEventListener('dragstart', e=>{i.classList.add('dragging');e.dataTransfer.setData('text\/plain', i.dataset.id)});\n i.addEventListener('dragend', e=>{i.classList.remove('dragging')});\n });\n document.querySelectorAll('#pipelineBoard .column-body').forEach(col=>{\n col.addEventListener('dragover', e=>e.preventDefault());\n col.addEventListener('drop', e=>{e.preventDefault();const id=e.dataTransfer.getData('text\/plain');const stage = col.dataset.stage;const lead = state.leads.find(x=>x.id===id);if(lead){lead.status=stage;lead.lastContact=new Date().toISOString();saveState();}\n })\n });\n }\n\n \/\/ --- Utilities ---\n function escapeHtml(s){return String(s||'').replace(\/[&<>\\\"]\/g,m=>({'&':'&','<':'<','>':'>','\\\"':'"'}[m]))}\n function timeAgo(iso){if(!iso) return '-';const d=new Date(iso);const diff=(Date.now()-d.getTime())\/1000; if(diff<60) return Math.floor(diff)+'s ago'; if(diff<3600) return Math.floor(diff\/60)+'m ago'; if(diff<86400) return Math.floor(diff\/3600)+'h ago'; return Math.floor(diff\/86400)+'d ago'}\n\n \/\/ Prefer web.whatsapp.com for desktop, fallback to wa.me\n function openWhatsApp(phone, text){\n const cleaned = (phone||'').replace(\/[^\\d+]\/g,'');\n const encoded = encodeURIComponent(text||'');\n const isDesktop = !\/Mobi|Android\/i.test(navigator.userAgent);\n if(isDesktop){window.open(`https:\/\/web.whatsapp.com\/send?phone=${cleaned}&text=${encoded}`,'_blank');}\n else {window.open(`https:\/\/wa.me\/${cleaned}?text=${encoded}`,'_blank');}\n }\n\n \/\/ --- CRUD: Leads ---\n let editingLead = null;\n document.getElementById('addLeadBtn').addEventListener('click', ()=>openLeadModal());\n document.getElementById('addLeadBtn2').addEventListener('click', ()=>openLeadModal());\n function openLeadModal(lead){editingLead = lead || null;document.getElementById('modalLeadTitle').innerText = lead? 'Edit Lead':'Add Lead';document.getElementById('lead_name').value = lead?lead.name:'';document.getElementById('lead_company').value = lead?lead.company:'';document.getElementById('lead_phone').value = lead?lead.phone:'';document.getElementById('lead_email').value = lead?lead.email:'';document.getElementById('lead_value').value = lead?lead.value:'';document.getElementById('lead_status').value = lead?lead.status:'New';document.getElementById('modalLead').classList.add('show')}\n document.getElementById('closeLeadModal').addEventListener('click', ()=>document.getElementById('modalLead').classList.remove('show'))\n document.getElementById('saveLeadBtn').addEventListener('click', ()=>{\n const name=document.getElementById('lead_name').value.trim(); if(!name){alert('Name required');return}\n const leadObj={id: editingLead?editingLead.id:id(),name,company:document.getElementById('lead_company').value,phone:document.getElementById('lead_phone').value,email:document.getElementById('lead_email').value,value:parseFloat(document.getElementById('lead_value').value)||0,status:document.getElementById('lead_status').value,lastContact:new Date().toISOString()}\n if(editingLead){const idx=state.leads.findIndex(l=>l.id===editingLead.id);state.leads[idx]=leadObj}else{state.leads.unshift(leadObj)}\n document.getElementById('modalLead').classList.remove('show');saveState();\n })\n\n \/\/ --- CRUD: Products ---\n let editingProduct = null;\n document.getElementById('addProductBtn').addEventListener('click', ()=>openProductModal());\n function openProductModal(p){editingProduct = p || null;document.getElementById('modalProductTitle').innerText = p? 'Edit Product':'Add Product';document.getElementById('product_name').value = p?p.name:'';document.getElementById('product_category').value = p?p.category:'';document.getElementById('product_price').value = p?p.price:'';document.getElementById('product_stock').value = p?p.stock:'';document.getElementById('product_status').value = p?p.status:'Active';document.getElementById('product_desc').value = p?p.description||'':'';document.getElementById('modalProduct').classList.add('show')}\n document.getElementById('closeProductModal').addEventListener('click', ()=>document.getElementById('modalProduct').classList.remove('show'))\n document.getElementById('saveProductBtn').addEventListener('click', ()=>{\n const name=document.getElementById('product_name').value.trim(); if(!name){alert('Product name required');return}\n const p={id: editingProduct?editingProduct.id:id(),name,category:document.getElementById('product_category').value,price:parseFloat(document.getElementById('product_price').value)||0,stock:document.getElementById('product_stock').value,status:document.getElementById('product_status').value,description:document.getElementById('product_desc').value}\n if(editingProduct){const idx=state.products.findIndex(x=>x.id===editingProduct.id);state.products[idx]=p}else{state.products.unshift(p)}\n document.getElementById('modalProduct').classList.remove('show');saveState();\n })\n\n \/\/ --- CRUD: Tasks ---\n let editingTask = null;\n document.getElementById('addTaskBtn').addEventListener('click', ()=>openTaskModal());\n function openTaskModal(t){editingTask = t || null;document.getElementById('modalTaskTitle').innerText = t? 'Edit Task':'Add Task';document.getElementById('task_title').value = t?t.title:'';document.getElementById('task_related').value = t?t.related:'';document.getElementById('task_due').value = t?t.due:'';document.getElementById('task_stage').value = t?t.stage:'To Do';document.getElementById('modalTask').classList.add('show')}\n document.getElementById('closeTaskModal').addEventListener('click', ()=>document.getElementById('modalTask').classList.remove('show'))\n document.getElementById('saveTaskBtn').addEventListener('click', ()=>{\n const title=document.getElementById('task_title').value.trim(); if(!title){alert('Title required');return}\n const t={id: editingTask?editingTask.id:id(),title,related:document.getElementById('task_related').value,due:document.getElementById('task_due').value,stage:document.getElementById('task_stage').value}\n if(editingTask){const idx=state.tasks.findIndex(x=>x.id===editingTask.id);state.tasks[idx]=t}else{state.tasks.unshift(t)}\n document.getElementById('modalTask').classList.remove('show');saveState();\n })\n\n \/\/ --- Delegated actions for edit\/delete\/wa\/share\/nudge ---\n document.addEventListener('click', e=>{\n const btn = e.target.closest('button'); if(!btn) return; const action = btn.dataset.action; const id = btn.dataset.id;\n if(action==='editLead'){const l = state.leads.find(x=>x.id===id); if(l) openLeadModal(l)}\n if(action==='deleteLead'){if(confirm('Delete lead?')){state.leads=state.leads.filter(x=>x.id!==id);saveState();}}\n if(action==='waLead'){const l = state.leads.find(x=>x.id===id); if(l){const text=`Hello ${l.name}, this is from SalesCRM. How can I help you today?`;openWhatsApp(l.phone,text);}}\n if(action==='nudgeLead'){const l = state.leads.find(x=>x.id===id); if(l){const text=`Hi ${l.name}, just checking in \u2014 any updates on your decision regarding ${l.company}?`;openWhatsApp(l.phone,text);}}\n\n if(action==='viewLead'){const l=state.leads.find(x=>x.id===id); if(l) alert(`${l.name}\\n${l.company}\\n${l.email}\\n${l.phone}\\nValue: $${l.value}\\nStatus: ${l.status}`)}\n\n if(action==='editProduct'){const p=state.products.find(x=>x.id===id);if(p)openProductModal(p)}\n if(action==='deleteProduct'){if(confirm('Delete product?')){state.products=state.products.filter(x=>x.id!==id);saveState();}}\n if(action==='viewProduct'){const p=state.products.find(x=>x.id===id);if(p){currentViewingProduct=p;document.getElementById('modalProductViewTitle').innerText=p.name;document.getElementById('productViewBody').innerHTML=`<p><strong>Category:<\/strong> ${escapeHtml(p.category)}<\/p><p><strong>Price:<\/strong> $${numberWithCommas(Number(p.price).toFixed(2))}<\/p><p><strong>Stock:<\/strong> ${escapeHtml(String(p.stock))}<\/p><p>${escapeHtml(p.description||'')}<\/p>`;document.getElementById('modalProductView').classList.add('show')}} \n if(action==='shareProduct'){const p=state.products.find(x=>x.id===id);if(p){const phone = prompt('Enter phone number (country code, e.g. 15551234567) to share product via WhatsApp:'); if(phone){const text=`Product: ${p.name}\\nPrice: $${Number(p.price).toFixed(2)}\\n${p.description||''}`;openWhatsApp(phone,text);}}}\n\n if(action==='editTask'){const t=state.tasks.find(x=>x.id===id);if(t)openTaskModal(t)}\n if(action==='deleteTask'){if(confirm('Delete task?')){state.tasks=state.tasks.filter(x=>x.id!==id);saveState();}}\n })\n\n document.getElementById('closeProductView').addEventListener('click', ()=>document.getElementById('modalProductView').classList.remove('show'))\n document.getElementById('shareProductWhatsapp').addEventListener('click', ()=>{if(!currentViewingProduct){alert('No product selected');return}const phone = prompt('Enter phone number (country code, e.g. 15551234567) to share product via WhatsApp:'); if(phone){const p=currentViewingProduct;const text=`Product: ${p.name}\\nPrice: $${Number(p.price).toFixed(2)}\\n${p.description||''}`;openWhatsApp(phone,text);}})\n\n \/\/ --- Navigation ---\n document.querySelectorAll('.sidebar-menu li').forEach(li=>li.addEventListener('click', ()=>{document.querySelectorAll('.sidebar-menu li').forEach(i=>i.classList.remove('active'));li.classList.add('active');const view=li.dataset.view;document.querySelectorAll('.view').forEach(v=>v.style.display='none');document.getElementById('view-'+view).style.display='block'}))\n\n \/\/ --- Search ---\n document.getElementById('globalSearch').addEventListener('input', ()=>{renderLeads();renderProducts();renderTasks();renderPipeline();})\n\n \/\/ --- Export \/ Import ---\n document.getElementById('exportBtn').addEventListener('click', ()=>{\n const blob = new Blob([JSON.stringify(state,null,2)],{type:'application\/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='salescrm-export.json';document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(url);\n })\n document.getElementById('importBtn').addEventListener('click', ()=>document.getElementById('importFile').click())\n document.getElementById('importFile').addEventListener('change', e=>{const f=e.target.files[0];if(!f) return;const reader=new FileReader();reader.onload=ev=>{try{const imported=JSON.parse(ev.target.result); if(imported.leads && imported.products && imported.tasks){state=imported;saveState();alert('Imported successfully')} else alert('Invalid file format')}catch(err){alert('Invalid JSON')}},reader.readAsText(f)})\n\n \/\/ --- Init ---\n loadState();renderAll();\n\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>SalesCRM \u2014 Full Functional (local) SalesCRM Dashboard Leads & Contacts Pipeline Product Catalog Tasks Settings SalesCRM Export JSON Import JSON John Doe Total Leads 0 Pipeline Value $0 Pending Tasks 0 Products 0 Recent Leads Add Lead Name Company Email Phone Value Status Last Contact Actions Leads & Contacts Add Lead Name Company Email Phone […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8800","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8800"}],"version-history":[{"count":1,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800\/revisions"}],"predecessor-version":[{"id":8802,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800\/revisions\/8802"}],"wp:attachment":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8800,"date":"2025-11-06T14:16:57","date_gmt":"2025-11-06T14:16:57","guid":{"rendered":"https:\/\/test.zenxzone.com\/?page_id=8800"},"modified":"2025-11-06T14:16:57","modified_gmt":"2025-11-06T14:16:57","slug":"crm","status":"publish","type":"page","link":"https:\/\/test.zenxzone.com\/?page_id=8800","title":{"rendered":"crm"},"content":{"rendered":"\n\n\n\n \n \n SalesCRM \u2014 Full Functional (local)<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root{--primary:#4361ee;--secondary:#3f37c9;--success:#4cc9f0;--light:#f8f9fa;--dark:#212529;--sidebar-width:250px;--header-height:60px}\n *{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif}\n body{display:flex;min-height:100vh;background:#f5f7fb;color:var(--dark)}\n .sidebar{width:var(--sidebar-width);background:linear-gradient(180deg,var(--primary),var(--secondary));color:#fff;height:100vh;position:fixed;z-index:1000;padding-bottom:30px}\n .sidebar-header{padding:20px;display:flex;align-items:center}\n .sidebar-header h3{margin-left:10px}\n .sidebar-menu{padding:15px 0}\n .sidebar-menu ul{list-style:none}\n .sidebar-menu li{padding:12px 20px;transition:all .2s;display:flex;align-items:center;gap:10px}\n .sidebar-menu li:hover{background:rgba(255,255,255,.08);cursor:pointer}\n .sidebar-menu li.active{background:rgba(255,255,255,.12);border-left:4px solid rgba(255,255,255,.3)}\n .main-content{flex:1;margin-left:var(--sidebar-width)}\n .header{height:var(--header-height);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:100}\n .content{padding:20px}\n .card{background:#fff;border-radius:10px;padding:18px;box-shadow:0 4px 6px rgba(0,0,0,.06)}\n .dashboard-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:20px}\n table{width:100%;border-collapse:collapse}\n th,td{padding:12px;border-bottom:1px solid #eef2f6;text-align:left}\n th{background:#f8f9fa}\n .badge{padding:6px 10px;border-radius:20px;font-size:.78rem}\n .btn{padding:8px 12px;border-radius:6px;border:none;cursor:pointer}\n .btn-primary{background:var(--primary);color:#fff}\n .btn-success{background:#28a745;color:#fff}\n .flex{display:flex;gap:12px;align-items:center}\n .table-responsive{overflow-x:auto}\n .module-section{margin-bottom:20px}\n .whatsapp-btn{background:#25d366;color:#fff;border-radius:6px;padding:6px 10px;border:none;cursor:pointer}\n \/* modal *\/\n .modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:2000}\n .modal.show{display:flex}\n .modal-card{width:100%;max-width:760px;background:#fff;border-radius:8px;padding:18px}\n .form-group{margin-bottom:12px}\n .form-control{width:100%;padding:10px;border:1px solid #ced4da;border-radius:6px}\n .kanban-board{display:flex;gap:12px;overflow-x:auto;padding-top:10px}\n .kanban-column{min-width:260px;background:#f8f9fa;padding:12px;border-radius:8px}\n .kanban-item{background:#fff;padding:10px;border-radius:8px;margin-bottom:10px;cursor:grab}\n .kanban-item.dragging{opacity:0.5}\n .search-input{padding:8px 12px;border-radius:8px;border:1px solid #ddd;width:260px}\n .small{font-size:.85rem;color:#6c757d}\n .truncate{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n @media(max-width:768px){.sidebar{width:70px}.sidebar-header h3,.sidebar-menu span{display:none}.main-content{margin-left:70px}}\n <\/style>\n<\/head>\n<body>\n <div class=\"sidebar\">\n <div class=\"sidebar-header\"><i class=\"fas fa-chart-line fa-2x\"><\/i><h3>SalesCRM<\/h3><\/div>\n <div class=\"sidebar-menu\">\n <ul>\n <li class=\"active\" data-view=\"dashboard\"><i class=\"fas fa-home\"><\/i><span>Dashboard<\/span><\/li>\n <li data-view=\"leads\"><i class=\"fas fa-users\"><\/i><span>Leads & Contacts<\/span><\/li>\n <li data-view=\"pipeline\"><i class=\"fas fa-project-diagram\"><\/i><span>Pipeline<\/span><\/li>\n <li data-view=\"products\"><i class=\"fas fa-box\"><\/i><span>Product Catalog<\/span><\/li>\n <li data-view=\"tasks\"><i class=\"fas fa-tasks\"><\/i><span>Tasks<\/span><\/li>\n <li data-view=\"settings\"><i class=\"fas fa-cog\"><\/i><span>Settings<\/span><\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <div class=\"header\">\n <div style=\"display:flex;gap:12px;align-items:center\">\n <h1 style=\"font-size:1.2rem;color:var(--primary);margin-right:6px\">SalesCRM<\/h1>\n <input class=\"search-input\" id=\"globalSearch\" placeholder=\"Search leads, products, tasks...\" \/>\n <\/div>\n <div class=\"flex\">\n <button class=\"btn\" id=\"exportBtn\"><i class=\"fas fa-file-export\"><\/i> Export JSON<\/button>\n <button class=\"btn\" id=\"importBtn\"><i class=\"fas fa-file-import\"><\/i> Import JSON<\/button>\n <div class=\"user-profile flex\"><img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/150?img=32\" style=\"width:36px;height:36px;border-radius:50%\"\/><div class=\"small\">John Doe<\/div><\/div>\n <\/div>\n <\/div>\n\n <div class=\"content\">\n \n <div id=\"view-dashboard\" class=\"view\">\n <div class=\"dashboard-cards\">\n <div class=\"card\"><div class=\"small\">Total Leads<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-leads\">0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Pipeline Value<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-value\">$0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Pending Tasks<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-tasks\">0<\/div><\/div>\n <div class=\"card\"><div class=\"small\">Products<\/div><div style=\"font-size:1.6rem;font-weight:700\" id=\"stat-products\">0<\/div><\/div>\n <\/div>\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Recent Leads<\/h3><div><button class=\"btn btn-primary\" id=\"addLeadBtn\"><i class=\"fas fa-plus\"><\/i> Add Lead<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"leadsTable\"><thead><tr><th>Name<\/th><th>Company<\/th><th>Email<\/th><th>Phone<\/th><th>Value<\/th><th>Status<\/th><th>Last Contact<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-leads\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Leads & Contacts<\/h3><div><button class=\"btn btn-primary\" id=\"addLeadBtn2\"><i class=\"fas fa-plus\"><\/i> Add Lead<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"leadsTableFull\"><thead><tr><th>Name<\/th><th>Company<\/th><th>Email<\/th><th>Phone<\/th><th>Value<\/th><th>Status<\/th><th>Last Contact<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-pipeline\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Pipeline (Drag leads between stages)<\/h3><div><\/div><\/div>\n <div class=\"kanban-board\" id=\"pipelineBoard\">\n <div class=\"kanban-column\" data-stage=\"New\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">New<\/div><div class=\"column-body\" data-stage=\"New\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Contacted\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Contacted<\/div><div class=\"column-body\" data-stage=\"Contacted\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Qualified\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Qualified<\/div><div class=\"column-body\" data-stage=\"Qualified\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Proposal\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Proposal<\/div><div class=\"column-body\" data-stage=\"Proposal\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Negotiation\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Negotiation<\/div><div class=\"column-body\" data-stage=\"Negotiation\"><\/div><\/div>\n <div class=\"kanban-column\" data-stage=\"Closed\"><div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">Closed<\/div><div class=\"column-body\" data-stage=\"Closed\"><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-products\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Product Catalog<\/h3><div><button class=\"btn btn-primary\" id=\"addProductBtn\"><i class=\"fas fa-plus\"><\/i> Add Product<\/button><\/div><\/div>\n <div class=\"table-responsive\"><table id=\"productsTable\"><thead><tr><th>Product<\/th><th>Category<\/th><th>Price<\/th><th>Stock<\/th><th>Status<\/th><th>Description<\/th><th>Actions<\/th><\/tr><\/thead><tbody><\/tbody><\/table><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"view-tasks\" class=\"view\" style=\"display:none\">\n <div class=\"module-section card\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px\"><h3 style=\"color:var(--primary)\">Tasks & Follow-ups<\/h3><div><button class=\"btn btn-primary\" id=\"addTaskBtn\"><i class=\"fas fa-plus\"><\/i> Add Task<\/button><\/div><\/div>\n <div class=\"kanban-board\" id=\"tasksBoard\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"view-settings\" class=\"view\" style=\"display:none\">\n <div class=\"card\"><h3 style=\"color:var(--primary)\">Settings<\/h3>\n <p class=\"small\">This demo stores data in your browser’s localStorage. Use Export\/Import to backup or move data between devices.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal\" id=\"modalLead\">\n <div class=\"modal-card\">\n <h3 id=\"modalLeadTitle\">Add Lead<\/h3>\n <div class=\"form-group\"><label>Name<\/label><input class=\"form-control\" id=\"lead_name\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Company<\/label><input class=\"form-control\" id=\"lead_company\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Phone<\/label><input class=\"form-control\" id=\"lead_phone\" \/><\/div><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Email<\/label><input class=\"form-control\" id=\"lead_email\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Value ($)<\/label><input class=\"form-control\" id=\"lead_value\" type=\"number\" \/><\/div><\/div>\n <div class=\"form-group\"><label>Status<\/label><select id=\"lead_status\" class=\"form-control\"><option>New<\/option><option>Contacted<\/option><option>Qualified<\/option><option>Proposal<\/option><option>Negotiation<\/option><option>Closed<\/option><\/select><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeLeadModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveLeadBtn\">Save Lead<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalProduct\">\n <div class=\"modal-card\">\n <h3 id=\"modalProductTitle\">Add Product<\/h3>\n <div class=\"form-group\"><label>Product Name<\/label><input class=\"form-control\" id=\"product_name\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Category<\/label><input class=\"form-control\" id=\"product_category\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Price<\/label><input class=\"form-control\" id=\"product_price\" type=\"number\" \/><\/div><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Stock<\/label><input class=\"form-control\" id=\"product_stock\" type=\"number\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Status<\/label><select id=\"product_status\" class=\"form-control\"><option>Active<\/option><option>Limited<\/option><option>Inactive<\/option><\/select><\/div><\/div>\n <div class=\"form-group\"><label>Description<\/label><textarea id=\"product_desc\" class=\"form-control\" rows=\"4\" placeholder=\"Short product description\"><\/textarea><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeProductModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveProductBtn\">Save Product<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalTask\">\n <div class=\"modal-card\">\n <h3 id=\"modalTaskTitle\">Add Task<\/h3>\n <div class=\"form-group\"><label>Title<\/label><input class=\"form-control\" id=\"task_title\" \/><\/div>\n <div class=\"form-row\" style=\"display:flex;gap:12px;margin-bottom:12px\"><div style=\"flex:1\" class=\"form-group\"><label>Related To (Lead name)<\/label><input class=\"form-control\" id=\"task_related\" \/><\/div><div style=\"flex:1\" class=\"form-group\"><label>Due Date<\/label><input class=\"form-control\" id=\"task_due\" type=\"datetime-local\" \/><\/div><\/div>\n <div class=\"form-group\"><label>Stage<\/label><select id=\"task_stage\" class=\"form-control\"><option>To Do<\/option><option>In Progress<\/option><option>Completed<\/option><\/select><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeTaskModal\">Cancel<\/button><button class=\"btn btn-primary\" id=\"saveTaskBtn\">Save Task<\/button><\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal\" id=\"modalProductView\">\n <div class=\"modal-card\">\n <h3 id=\"modalProductViewTitle\">Product<\/h3>\n <div id=\"productViewBody\"><\/div>\n <div style=\"display:flex;gap:8px;justify-content:flex-end;margin-top:12px\"><button class=\"btn\" id=\"closeProductView\">Close<\/button><button class=\"btn whatsapp-btn\" id=\"shareProductWhatsapp\">Share via WhatsApp<\/button><\/div>\n <\/div>\n <\/div>\n\n <input type=\"file\" id=\"importFile\" accept=\"application\/json\" style=\"display:none\" \/>\n\n <script>\n \/\/ --- Data model in localStorage ---\n const STORAGE_KEY = 'salescrm_data_v1';\n let state = { leads: [], products: [], tasks: [] };\n let currentViewingProduct = null;\n\n function loadState(){\n try{const raw = localStorage.getItem(STORAGE_KEY); if(raw){state=JSON.parse(raw);} else {seedDemo(); saveState();}}\n catch(e){console.error('failed load',e);seedDemo();saveState();}\n }\n function saveState(){localStorage.setItem(STORAGE_KEY,JSON.stringify(state));renderAll();}\n\n function seedDemo(){state = {\n leads:[\n {id:id(),name:'Sarah Johnson',company:'Tech Solutions Inc.',email:'sarah@techsolutions.com',phone:'+15551234567',value:12500,status:'Contacted',lastContact:new Date().toISOString()},\n {id:id(),name:'Michael Chen',company:'Global Enterprises',email:'michael@globalent.com',phone:'+15559876543',value:8200,status:'Qualified',lastContact:new Date().toISOString()},\n {id:id(),name:'Emily Rodriguez',company:'Innovate Labs',email:'emily@innovatelabs.com',phone:'+15554567890',value:15000,status:'New',lastContact:new Date().toISOString()},\n ],\n products:[\n {id:id(),name:'Premium Business Suite',category:'Software',price:299.99,stock:'Unlimited',status:'Active',description:'Full-featured business suite: CRM, invoicing, and analytics.'},\n {id:id(),name:'Enterprise CRM License',category:'Software',price:499.99,stock:45,status:'Active',description:'Enterprise-grade CRM license with advanced reporting and SSO.'},\n {id:id(),name:'Basic Support Package',category:'Service',price:99.99,stock:'Unlimited',status:'Limited',description:'Email support and basic troubleshooting for one year.'}\n ],\n tasks:[\n {id:id(),title:'Follow up with Sarah Johnson',related:'Sarah Johnson',due:new Date().toISOString(),stage:'To Do'},\n {id:id(),title:'Prepare Q2 Sales Report',related:'',due:new Date().toISOString(),stage:'In Progress'}\n ]\n }}\n\n function id(){return Math.random().toString(36).slice(2,9)}\n\n \/\/ --- Rendering ---\n function renderAll(){renderStats();renderLeads();renderProducts();renderTasks();renderPipeline();}\n\n function renderStats(){document.getElementById('stat-leads').innerText = state.leads.length;document.getElementById('stat-products').innerText = state.products.length;document.getElementById('stat-tasks').innerText = state.tasks.filter(t=>t.stage!=='Completed').length;let total = state.leads.reduce((s,l)=>s+(Number(l.value)||0),0);document.getElementById('stat-value').innerText = '$' + numberWithCommas(total.toFixed(2));}\n\n function numberWithCommas(x){return x.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g,\",\")}\n\n function renderLeads(){const tbody=document.querySelector('#leadsTable tbody');const tbody2=document.querySelector('#leadsTableFull tbody');tbody.innerHTML='';tbody2.innerHTML='';const q = (document.getElementById('globalSearch').value||'').toLowerCase();state.leads.forEach(lead=>{if(q && !(lead.name+lead.company+lead.email+lead.phone).toLowerCase().includes(q)) return;const row = document.createElement('tr');row.innerHTML = `<td>${escapeHtml(lead.name)}<\/td><td>${escapeHtml(lead.company)}<\/td><td>${escapeHtml(lead.email)}<\/td><td>${escapeHtml(lead.phone)}<\/td><td>$${numberWithCommas(Number(lead.value||0).toFixed(2))}<\/td><td><span class=\"badge\">${lead.status}<\/span><\/td><td class=\"small\">${timeAgo(lead.lastContact)}<\/td><td><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"editLead\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"deleteLead\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"waLead\"><i class=\"fab fa-whatsapp\"><\/i><\/button><button class=\"btn\" data-id=\"${lead.id}\" data-action=\"nudgeLead\" title=\"Send nudge via WhatsApp\"><i class=\"fas fa-bell\"><\/i><\/button><\/td>`;tbody.appendChild(row);\n const r2=row.cloneNode(true);tbody2.appendChild(r2);\n });\n }\n\n function renderProducts(){const tbody=document.querySelector('#productsTable tbody');tbody.innerHTML='';const q=(document.getElementById('globalSearch').value||'').toLowerCase();state.products.forEach(p=>{if(q && !(p.name+p.category+p.description).toLowerCase().includes(q)) return;const row=document.createElement('tr');row.innerHTML=`<td>${escapeHtml(p.name)}<\/td><td>${escapeHtml(p.category)}<\/td><td>$${numberWithCommas(Number(p.price).toFixed(2))}<\/td><td>${escapeHtml(String(p.stock))}<\/td><td><span class=\"badge\">${escapeHtml(p.status)}<\/span><\/td><td class=\"truncate\">${escapeHtml(p.description||'')}<\/td><td><button class=\"btn\" data-id=\"${p.id}\" data-action=\"viewProduct\"><i class=\"fas fa-eye\"><\/i><\/button><button class=\"btn\" data-id=\"${p.id}\" data-action=\"editProduct\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-id=\"${p.id}\" data-action=\"deleteProduct\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><button class=\"btn whatsapp-btn\" data-id=\"${p.id}\" data-action=\"shareProduct\"><i class=\"fab fa-whatsapp\"><\/i><\/button><\/td>`;tbody.appendChild(row)})}\n\n function renderTasks(){const board=document.getElementById('tasksBoard');board.innerHTML='';const groups = ['To Do','In Progress','Completed'];groups.forEach(g=>{const col=document.createElement('div');col.className='kanban-column';col.style.minWidth='260px';col.innerHTML=`<div class=\"small\" style=\"font-weight:700;margin-bottom:8px\">${g}<\/div>`;const body=document.createElement('div');state.tasks.filter(t=>t.stage===g).forEach(task=>{const item=document.createElement('div');item.className='kanban-item';item.draggable=true;item.dataset.id=task.id;item.innerHTML=`<div style=\"font-weight:600\">${escapeHtml(task.title)}<\/div><div class=\"small\">${escapeHtml(task.related)}<\/div><div class=\"small\">Due: ${task.due?new Date(task.due).toLocaleString():'-'}<\/div><div style=\"margin-top:6px\"><button class=\"btn\" data-action=\"editTask\" data-id=\"${task.id}\"><i class=\"fas fa-edit\"><\/i><\/button><button class=\"btn\" data-action=\"deleteTask\" data-id=\"${task.id}\"><i class=\"fas fa-trash\" style=\"color:#e63946\"><\/i><\/button><\/div>`;body.appendChild(item)}) ;col.appendChild(body);board.appendChild(col)});\n \/\/ add drag\/drop for tasks board\n board.querySelectorAll('.kanban-item').forEach(i=>{\n i.addEventListener('dragstart', e=>{e.dataTransfer.setData('text\/plain', i.dataset.id)})\n });\n board.querySelectorAll('.kanban-column').forEach(col=>{\n col.addEventListener('dragover', e=>e.preventDefault());\n col.addEventListener('drop', e=>{e.preventDefault();const id=e.dataTransfer.getData('text\/plain');const stage = col.querySelector('div').innerText;const t = state.tasks.find(x=>x.id===id);if(t){t.stage=stage;saveState();}\n })\n });\n }\n\n function renderPipeline(){const cols = document.querySelectorAll('#pipelineBoard .column-body');cols.forEach(c=>c.innerHTML=''); ['New','Contacted','Qualified','Proposal','Negotiation','Closed'].forEach(stage=>{const container = document.querySelector(`#pipelineBoard .column-body[data-stage='${stage}']`) || document.querySelector(`#pipelineBoard .column-body`);const items = state.leads.filter(l=>l.status===stage);items.forEach(it=>{const el = document.createElement('div');el.className='kanban-item';el.draggable=true;el.dataset.id=it.id;el.innerHTML=`<div style=\"font-weight:600\">${escapeHtml(it.name)}<\/div><div class=\"small\">${escapeHtml(it.company)}<\/div><div class=\"small\">Value: $${numberWithCommas(Number(it.value||0).toFixed(2))}<\/div><div style=\"margin-top:6px\"><button class=\"btn\" data-action=\"viewLead\" data-id=\"${it.id}\"><i class=\"fas fa-eye\"><\/i><\/button><\/div>`;container.appendChild(el)})})\n \/\/ enable drag\/drop for pipeline columns\n document.querySelectorAll('#pipelineBoard .kanban-item').forEach(i=>{\n i.addEventListener('dragstart', e=>{i.classList.add('dragging');e.dataTransfer.setData('text\/plain', i.dataset.id)});\n i.addEventListener('dragend', e=>{i.classList.remove('dragging')});\n });\n document.querySelectorAll('#pipelineBoard .column-body').forEach(col=>{\n col.addEventListener('dragover', e=>e.preventDefault());\n col.addEventListener('drop', e=>{e.preventDefault();const id=e.dataTransfer.getData('text\/plain');const stage = col.dataset.stage;const lead = state.leads.find(x=>x.id===id);if(lead){lead.status=stage;lead.lastContact=new Date().toISOString();saveState();}\n })\n });\n }\n\n \/\/ --- Utilities ---\n function escapeHtml(s){return String(s||'').replace(\/[&<>\\\"]\/g,m=>({'&':'&','<':'<','>':'>','\\\"':'"'}[m]))}\n function timeAgo(iso){if(!iso) return '-';const d=new Date(iso);const diff=(Date.now()-d.getTime())\/1000; if(diff<60) return Math.floor(diff)+'s ago'; if(diff<3600) return Math.floor(diff\/60)+'m ago'; if(diff<86400) return Math.floor(diff\/3600)+'h ago'; return Math.floor(diff\/86400)+'d ago'}\n\n \/\/ Prefer web.whatsapp.com for desktop, fallback to wa.me\n function openWhatsApp(phone, text){\n const cleaned = (phone||'').replace(\/[^\\d+]\/g,'');\n const encoded = encodeURIComponent(text||'');\n const isDesktop = !\/Mobi|Android\/i.test(navigator.userAgent);\n if(isDesktop){window.open(`https:\/\/web.whatsapp.com\/send?phone=${cleaned}&text=${encoded}`,'_blank');}\n else {window.open(`https:\/\/wa.me\/${cleaned}?text=${encoded}`,'_blank');}\n }\n\n \/\/ --- CRUD: Leads ---\n let editingLead = null;\n document.getElementById('addLeadBtn').addEventListener('click', ()=>openLeadModal());\n document.getElementById('addLeadBtn2').addEventListener('click', ()=>openLeadModal());\n function openLeadModal(lead){editingLead = lead || null;document.getElementById('modalLeadTitle').innerText = lead? 'Edit Lead':'Add Lead';document.getElementById('lead_name').value = lead?lead.name:'';document.getElementById('lead_company').value = lead?lead.company:'';document.getElementById('lead_phone').value = lead?lead.phone:'';document.getElementById('lead_email').value = lead?lead.email:'';document.getElementById('lead_value').value = lead?lead.value:'';document.getElementById('lead_status').value = lead?lead.status:'New';document.getElementById('modalLead').classList.add('show')}\n document.getElementById('closeLeadModal').addEventListener('click', ()=>document.getElementById('modalLead').classList.remove('show'))\n document.getElementById('saveLeadBtn').addEventListener('click', ()=>{\n const name=document.getElementById('lead_name').value.trim(); if(!name){alert('Name required');return}\n const leadObj={id: editingLead?editingLead.id:id(),name,company:document.getElementById('lead_company').value,phone:document.getElementById('lead_phone').value,email:document.getElementById('lead_email').value,value:parseFloat(document.getElementById('lead_value').value)||0,status:document.getElementById('lead_status').value,lastContact:new Date().toISOString()}\n if(editingLead){const idx=state.leads.findIndex(l=>l.id===editingLead.id);state.leads[idx]=leadObj}else{state.leads.unshift(leadObj)}\n document.getElementById('modalLead').classList.remove('show');saveState();\n })\n\n \/\/ --- CRUD: Products ---\n let editingProduct = null;\n document.getElementById('addProductBtn').addEventListener('click', ()=>openProductModal());\n function openProductModal(p){editingProduct = p || null;document.getElementById('modalProductTitle').innerText = p? 'Edit Product':'Add Product';document.getElementById('product_name').value = p?p.name:'';document.getElementById('product_category').value = p?p.category:'';document.getElementById('product_price').value = p?p.price:'';document.getElementById('product_stock').value = p?p.stock:'';document.getElementById('product_status').value = p?p.status:'Active';document.getElementById('product_desc').value = p?p.description||'':'';document.getElementById('modalProduct').classList.add('show')}\n document.getElementById('closeProductModal').addEventListener('click', ()=>document.getElementById('modalProduct').classList.remove('show'))\n document.getElementById('saveProductBtn').addEventListener('click', ()=>{\n const name=document.getElementById('product_name').value.trim(); if(!name){alert('Product name required');return}\n const p={id: editingProduct?editingProduct.id:id(),name,category:document.getElementById('product_category').value,price:parseFloat(document.getElementById('product_price').value)||0,stock:document.getElementById('product_stock').value,status:document.getElementById('product_status').value,description:document.getElementById('product_desc').value}\n if(editingProduct){const idx=state.products.findIndex(x=>x.id===editingProduct.id);state.products[idx]=p}else{state.products.unshift(p)}\n document.getElementById('modalProduct').classList.remove('show');saveState();\n })\n\n \/\/ --- CRUD: Tasks ---\n let editingTask = null;\n document.getElementById('addTaskBtn').addEventListener('click', ()=>openTaskModal());\n function openTaskModal(t){editingTask = t || null;document.getElementById('modalTaskTitle').innerText = t? 'Edit Task':'Add Task';document.getElementById('task_title').value = t?t.title:'';document.getElementById('task_related').value = t?t.related:'';document.getElementById('task_due').value = t?t.due:'';document.getElementById('task_stage').value = t?t.stage:'To Do';document.getElementById('modalTask').classList.add('show')}\n document.getElementById('closeTaskModal').addEventListener('click', ()=>document.getElementById('modalTask').classList.remove('show'))\n document.getElementById('saveTaskBtn').addEventListener('click', ()=>{\n const title=document.getElementById('task_title').value.trim(); if(!title){alert('Title required');return}\n const t={id: editingTask?editingTask.id:id(),title,related:document.getElementById('task_related').value,due:document.getElementById('task_due').value,stage:document.getElementById('task_stage').value}\n if(editingTask){const idx=state.tasks.findIndex(x=>x.id===editingTask.id);state.tasks[idx]=t}else{state.tasks.unshift(t)}\n document.getElementById('modalTask').classList.remove('show');saveState();\n })\n\n \/\/ --- Delegated actions for edit\/delete\/wa\/share\/nudge ---\n document.addEventListener('click', e=>{\n const btn = e.target.closest('button'); if(!btn) return; const action = btn.dataset.action; const id = btn.dataset.id;\n if(action==='editLead'){const l = state.leads.find(x=>x.id===id); if(l) openLeadModal(l)}\n if(action==='deleteLead'){if(confirm('Delete lead?')){state.leads=state.leads.filter(x=>x.id!==id);saveState();}}\n if(action==='waLead'){const l = state.leads.find(x=>x.id===id); if(l){const text=`Hello ${l.name}, this is from SalesCRM. How can I help you today?`;openWhatsApp(l.phone,text);}}\n if(action==='nudgeLead'){const l = state.leads.find(x=>x.id===id); if(l){const text=`Hi ${l.name}, just checking in \u2014 any updates on your decision regarding ${l.company}?`;openWhatsApp(l.phone,text);}}\n\n if(action==='viewLead'){const l=state.leads.find(x=>x.id===id); if(l) alert(`${l.name}\\n${l.company}\\n${l.email}\\n${l.phone}\\nValue: $${l.value}\\nStatus: ${l.status}`)}\n\n if(action==='editProduct'){const p=state.products.find(x=>x.id===id);if(p)openProductModal(p)}\n if(action==='deleteProduct'){if(confirm('Delete product?')){state.products=state.products.filter(x=>x.id!==id);saveState();}}\n if(action==='viewProduct'){const p=state.products.find(x=>x.id===id);if(p){currentViewingProduct=p;document.getElementById('modalProductViewTitle').innerText=p.name;document.getElementById('productViewBody').innerHTML=`<p><strong>Category:<\/strong> ${escapeHtml(p.category)}<\/p><p><strong>Price:<\/strong> $${numberWithCommas(Number(p.price).toFixed(2))}<\/p><p><strong>Stock:<\/strong> ${escapeHtml(String(p.stock))}<\/p><p>${escapeHtml(p.description||'')}<\/p>`;document.getElementById('modalProductView').classList.add('show')}} \n if(action==='shareProduct'){const p=state.products.find(x=>x.id===id);if(p){const phone = prompt('Enter phone number (country code, e.g. 15551234567) to share product via WhatsApp:'); if(phone){const text=`Product: ${p.name}\\nPrice: $${Number(p.price).toFixed(2)}\\n${p.description||''}`;openWhatsApp(phone,text);}}}\n\n if(action==='editTask'){const t=state.tasks.find(x=>x.id===id);if(t)openTaskModal(t)}\n if(action==='deleteTask'){if(confirm('Delete task?')){state.tasks=state.tasks.filter(x=>x.id!==id);saveState();}}\n })\n\n document.getElementById('closeProductView').addEventListener('click', ()=>document.getElementById('modalProductView').classList.remove('show'))\n document.getElementById('shareProductWhatsapp').addEventListener('click', ()=>{if(!currentViewingProduct){alert('No product selected');return}const phone = prompt('Enter phone number (country code, e.g. 15551234567) to share product via WhatsApp:'); if(phone){const p=currentViewingProduct;const text=`Product: ${p.name}\\nPrice: $${Number(p.price).toFixed(2)}\\n${p.description||''}`;openWhatsApp(phone,text);}})\n\n \/\/ --- Navigation ---\n document.querySelectorAll('.sidebar-menu li').forEach(li=>li.addEventListener('click', ()=>{document.querySelectorAll('.sidebar-menu li').forEach(i=>i.classList.remove('active'));li.classList.add('active');const view=li.dataset.view;document.querySelectorAll('.view').forEach(v=>v.style.display='none');document.getElementById('view-'+view).style.display='block'}))\n\n \/\/ --- Search ---\n document.getElementById('globalSearch').addEventListener('input', ()=>{renderLeads();renderProducts();renderTasks();renderPipeline();})\n\n \/\/ --- Export \/ Import ---\n document.getElementById('exportBtn').addEventListener('click', ()=>{\n const blob = new Blob([JSON.stringify(state,null,2)],{type:'application\/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='salescrm-export.json';document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(url);\n })\n document.getElementById('importBtn').addEventListener('click', ()=>document.getElementById('importFile').click())\n document.getElementById('importFile').addEventListener('change', e=>{const f=e.target.files[0];if(!f) return;const reader=new FileReader();reader.onload=ev=>{try{const imported=JSON.parse(ev.target.result); if(imported.leads && imported.products && imported.tasks){state=imported;saveState();alert('Imported successfully')} else alert('Invalid file format')}catch(err){alert('Invalid JSON')}},reader.readAsText(f)})\n\n \/\/ --- Init ---\n loadState();renderAll();\n\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>SalesCRM \u2014 Full Functional (local) SalesCRM Dashboard Leads & Contacts Pipeline Product Catalog Tasks Settings SalesCRM Export JSON Import JSON John Doe Total Leads 0 Pipeline Value $0 Pending Tasks 0 Products 0 Recent Leads Add Lead Name Company Email Phone Value Status Last Contact Actions Leads & Contacts Add Lead Name Company Email Phone […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8800","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8800"}],"version-history":[{"count":1,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800\/revisions"}],"predecessor-version":[{"id":8802,"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=\/wp\/v2\/pages\/8800\/revisions\/8802"}],"wp:attachment":[{"href":"https:\/\/test.zenxzone.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}