RealEstate CRM<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n.recrm-app{--primary:#2563eb;--primary-dark:#1d4ed8;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--dark:#1e293b;--gray:#64748b;--light:#f8fafc;--border:#e2e8f0;--shadow:0 1px 3px rgba(0,0,0,.1);--shadow-lg:0 10px 25px rgba(0,0,0,.15);--radius:8px;--sidebar-w:240px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--dark);background:var(--light);min-height:100vh;display:flex}\r\n.recrm-app *{box-sizing:border-box}\r\n.recrm-sidebar{width:var(--sidebar-w);background:var(--dark);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform .3s}\r\n.recrm-logo{padding:20px;font-size:18px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}\r\n.recrm-logo i{color:var(--primary);font-size:22px}\r\n.recrm-nav{padding:12px 0;flex:1;overflow-y:auto}\r\n.recrm-nav a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:all .15s;border-left:3px solid transparent;cursor:pointer}\r\n.recrm-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}\r\n.recrm-nav a.active{color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--primary);font-weight:600}\r\n.recrm-nav a i{width:18px;text-align:center;font-size:16px}\r\n.recrm-main{flex:1;margin-left:var(--sidebar-w);padding:24px 32px;min-height:100vh;max-width:100%}\r\n.recrm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}\r\n.recrm-header h1{font-size:22px;font-weight:700}\r\n.recrm-header-actions{display:flex;gap:8px;align-items:center}\r\n.recrm-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1}\r\n.recrm-btn-primary{background:var(--primary);color:#fff}\r\n.recrm-btn-primary:hover{background:var(--primary-dark)}\r\n.recrm-btn-success{background:var(--success);color:#fff}\r\n.recrm-btn-success:hover{background:#15803d}\r\n.recrm-btn-danger{background:var(--danger);color:#fff}\r\n.recrm-btn-danger:hover{background:#b91c1c}\r\n.recrm-btn-warning{background:var(--warning);color:#fff}\r\n.recrm-btn-warning:hover{background:#b45309}\r\n.recrm-btn-outline{background:transparent;border:1px solid var(--border);color:var(--gray)}\r\n.recrm-btn-outline:hover{background:var(--light);border-color:var(--gray)}\r\n.recrm-btn-sm{padding:5px 10px;font-size:12px}\r\n.recrm-btn-icon{padding:6px;border-radius:4px;background:transparent;border:1px solid var(--border);color:var(--gray);cursor:pointer;transition:all .15s;font-size:13px}\r\n.recrm-btn-icon:hover{background:var(--light);color:var(--dark)}\r\n.recrm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}\r\n.recrm-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border)}\r\n.recrm-card-label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}\r\n.recrm-card-value{font-size:28px;font-weight:700;margin-bottom:4px}\r\n.recrm-card-sub{font-size:12px;color:var(--gray)}\r\n.recrm-card .recrm-card-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}\r\n.recrm-card-icon.blue{background:#dbeafe;color:var(--primary)}\r\n.recrm-card-icon.green{background:#dcfce7;color:var(--success)}\r\n.recrm-card-icon.yellow{background:#fef3c7;color:var(--warning)}\r\n.recrm-card-icon.red{background:#fee2e2;color:var(--danger)}\r\n.recrm-section{display:none}\r\n.recrm-section.active{display:block}\r\n.recrm-table-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}\r\n.recrm-table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}\r\n.recrm-table-toolbar .recrm-search{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--light)}\r\n.recrm-table-toolbar .recrm-search input{border:none;background:none;outline:none;font-size:13px;min-width:180px;color:var(--dark)}\r\n.recrm-table-toolbar .recrm-search i{color:var(--gray);font-size:14px}\r\n.recrm-table-toolbar .recrm-filters{display:flex;gap:8px;flex-wrap:wrap}\r\n.recrm-table-toolbar select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;color:var(--dark)}\r\n.recrm-table{width:100%;border-collapse:collapse}\r\n.recrm-table th{padding:10px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);background:var(--light);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}\r\n.recrm-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}\r\n.recrm-table tr:hover td{background:var(--light)}\r\n.recrm-table .recrm-actions{display:flex;gap:4px}\r\n.recrm-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}\r\n.recrm-badge-blue{background:#dbeafe;color:#1d4ed8}\r\n.recrm-badge-green{background:#dcfce7;color:#15803d}\r\n.recrm-badge-yellow{background:#fef3c7;color:#b45309}\r\n.recrm-badge-red{background:#fee2e2;color:#b91c1c}\r\n.recrm-badge-gray{background:#f1f5f9;color:#475569}\r\n.recrm-badge-purple{background:#f3e8ff;color:#7c3aed}\r\n.recrm-badge-orange{background:#ffedd5;color:#c2410c}\r\n.recrm-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:20px}\r\n.recrm-modal-overlay.open{display:flex}\r\n.recrm-modal{background:#fff;border-radius:12px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}\r\n.recrm-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}\r\n.recrm-modal-header h3{font-size:18px;font-weight:700}\r\n.recrm-modal-close{background:none;border:none;font-size:24px;color:var(--gray);cursor:pointer;padding:0;line-height:1}\r\n.recrm-modal-close:hover{color:var(--dark)}\r\n.recrm-modal-body{padding:20px 24px}\r\n.recrm-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border)}\r\n.recrm-form-group{margin-bottom:16px}\r\n.recrm-form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--dark)}\r\n.recrm-form-group input,.recrm-form-group select,.recrm-form-group textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;background:#fff;color:var(--dark);transition:border-color .15s}\r\n.recrm-form-group input:focus,.recrm-form-group select:focus,.recrm-form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}\r\n.recrm-form-group textarea{min-height:80px;resize:vertical}\r\n.recrm-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}\r\n.recrm-toast-container{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}\r\n.recrm-toast{padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:recrmSlideIn .3s ease;max-width:360px}\r\n.recrm-toast-success{background:var(--success)}\r\n.recrm-toast-error{background:var(--danger)}\r\n.recrm-toast-warning{background:var(--warning)}\r\n.recrm-toast-info{background:var(--primary)}\r\n@keyframes recrmSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}\r\n.recrm-empty{text-align:center;padding:40px 20px;color:var(--gray)}\r\n.recrm-empty i{font-size:40px;margin-bottom:12px;opacity:.4}\r\n.recrm-empty p{font-size:14px}\r\n.recrm-status-bar{padding:4px 0}\r\n.recrm-status-bar .recrm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}\r\n.recrm-dot-green{background:var(--success)}\r\n.recrm-dot-yellow{background:var(--warning)}\r\n.recrm-dot-red{background:var(--danger)}\r\n.recrm-dot-gray{background:var(--gray)}\r\n.recrm-dot-blue{background:var(--primary)}\r\n.recrm-setup{max-width:500px;margin:60px auto;text-align:center}\r\n.recrm-setup h2{margin-bottom:8px}\r\n.recrm-setup p{color:var(--gray);font-size:14px;margin-bottom:24px}\r\n.recrm-setup input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:6px;font-size:14px;margin-bottom:12px}\r\n.recrm-setup input:focus{outline:none;border-color:var(--primary)}\r\n.recrm-saving{opacity:.6;pointer-events:none}\r\n.hamburger{display:none;background:none;border:none;color:var(--dark);font-size:20px;cursor:pointer;padding:4px}\r\n@media(max-width:768px){\r\n .recrm-sidebar{transform:translateX(-100%)}\r\n .recrm-sidebar.open{transform:translateX(0)}\r\n .recrm-main{margin-left:0;padding:16px}\r\n .hamburger{display:block}\r\n .recrm-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}\r\n .recrm-form-row{grid-template-columns:1fr}\r\n}\r\n@media(max-width:480px){\r\n .recrm-cards{grid-template-columns:1fr}\r\n .recrm-table-toolbar{flex-direction:column;align-items:stretch}\r\n .recrm-table-toolbar .recrm-search input{min-width:auto;width:100%}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"recrm-app\" id=\"recrm-app\">\r\n <aside class=\"recrm-sidebar\" id=\"recrm-sidebar\">\r\n <div class=\"recrm-logo\"><i class=\"fas fa-building\"><\/i> RealCRM<\/div>\r\n <nav class=\"recrm-nav\">\r\n <a class=\"active\" data-section=\"dashboard\"><i class=\"fas fa-chart-pie\"><\/i> Dashboard<\/a>\r\n <a data-section=\"contacts\"><i class=\"fas fa-address-book\"><\/i> Contacts<\/a>\r\n <a data-section=\"properties\"><i class=\"fas fa-home\"><\/i> Properties<\/a>\r\n <a data-section=\"deals\"><i class=\"fas fa-handshake\"><\/i> Deals<\/a>\r\n <a data-section=\"tasks\"><i class=\"fas fa-tasks\"><\/i> Tasks<\/a>\r\n <\/nav>\r\n <div style=\"padding:12px 20px;border-top:1px solid rgba(255,255,255,.1)\">\r\n <a style=\"display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;cursor:pointer\" data-section=\"settings\"><i class=\"fas fa-cog\"><\/i> Settings<\/a>\r\n <\/div>\r\n <\/aside>\r\n\r\n <main class=\"recrm-main\">\r\n <button class=\"hamburger\" id=\"recrm-hamburger\"><i class=\"fas fa-bars\"><\/i><\/button>\r\n\r\n <div id=\"recrm-setup\" class=\"recrm-setup\" style=\"display:none\">\r\n <i class=\"fas fa-plug\" style=\"font-size:48px;color:var(--primary);margin-bottom:16px\"><\/i>\r\n <h2>Connect Your Google Sheet<\/h2>\r\n <p>Enter your Google Apps Script Web App URL to connect the CRM to your Google Sheet.<\/p>\r\n <input type=\"url\" id=\"recrm-api-url\" placeholder=\"https:\/\/script.google.com\/macros\/s\/...\/exec\">\r\n <p style=\"font-size:12px;color:var(--gray);margin-bottom:16px\">After deploying Code.gs as a web app, paste the URL here.<\/p>\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.connect()\"><i class=\"fas fa-link\"><\/i> Connect<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.showSetupHelp()\" style=\"margin-top:8px\"><i class=\"fas fa-question-circle\"><\/i> How to set up?<\/button>\r\n <\/div>\r\n\r\n <div id=\"recrm-content\" style=\"display:none\">\r\n <div class=\"recrm-header\">\r\n <h1 id=\"recrm-page-title\">Dashboard<\/h1>\r\n <div class=\"recrm-header-actions\" id=\"recrm-page-actions\"><\/div>\r\n <\/div>\r\n\r\n <section id=\"section-dashboard\" class=\"recrm-section active\"><\/section>\r\n <section id=\"section-contacts\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-properties\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-deals\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-tasks\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-settings\" class=\"recrm-section\"><\/section>\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<div class=\"recrm-modal-overlay\" id=\"recrm-modal\">\r\n <div class=\"recrm-modal\">\r\n <div class=\"recrm-modal-header\">\r\n <h3 id=\"recrm-modal-title\">Add Record<\/h3>\r\n <button class=\"recrm-modal-close\" onclick=\"App.closeModal()\">×<\/button>\r\n <\/div>\r\n <div class=\"recrm-modal-body\">\r\n <form id=\"recrm-form\" onsubmit=\"return App.handleFormSubmit(event)\"><\/form>\r\n <\/div>\r\n <div class=\"recrm-modal-footer\">\r\n <button type=\"button\" class=\"recrm-btn recrm-btn-outline\" onclick=\"App.closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" form=\"recrm-form\" class=\"recrm-btn recrm-btn-primary\" id=\"recrm-form-submit\"><i class=\"fas fa-save\"><\/i> Save<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"recrm-toast-container\" id=\"recrm-toast\"><\/div>\r\n\r\n<div id=\"recrm-setup-help\" class=\"recrm-modal-overlay\" style=\"display:none\">\r\n <div class=\"recrm-modal\" style=\"max-width:600px\">\r\n <div class=\"recrm-modal-header\">\r\n <h3>How to Set Up Google Sheets Backend<\/h3>\r\n <button class=\"recrm-modal-close\" onclick=\"document.getElementById('recrm-setup-help').style.display='none'\">×<\/button>\r\n <\/div>\r\n <div class=\"recrm-modal-body\" style=\"font-size:13px;line-height:1.6\">\r\n <ol style=\"padding-left:20px;display:flex;flex-direction:column;gap:10px\">\r\n <li><strong>Create a Google Sheet<\/strong> - Create a new blank sheet at sheets.google.com<\/li>\r\n <li><strong>Open Apps Script<\/strong> - Go to Extensions > Apps Script<\/li>\r\n <li><strong>Paste Code<\/strong> - Delete any default code and paste the entire content of <code>Code.gs<\/code><\/li>\r\n <li><strong>Deploy<\/strong> - Click \"Deploy\" > \"New deployment\", choose type \"Web app\"<\/li>\r\n <li><strong>Set Access<\/strong> - Execute as \"Me\", Who has access \"Anyone\"<\/li>\r\n <li><strong>Copy URL<\/strong> - After deploying, copy the Web App URL<\/li>\r\n <li><strong>Paste here<\/strong> - Paste the URL in the input field and click Connect<\/li>\r\n <\/ol>\r\n <p style=\"margin-top:12px;padding:10px;background:#fef3c7;border-radius:6px;font-size:12px\"><strong>Note:<\/strong> The sheet automatically creates the required tabs (Contacts, Properties, Deals, Tasks) when first accessed.<\/p>\r\n <\/div>\r\n <div class=\"recrm-modal-footer\">\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"document.getElementById('recrm-setup-help').style.display='none'\">Got it<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst App = {\r\n apiUrl: '',\r\n sheet: '',\r\n editingId: null,\r\n sections: ['dashboard','contacts','properties','deals','tasks','settings'],\r\n\r\n FORM_DEFS: {\r\n contacts: {\r\n title: 'Contact',\r\n fields: [\r\n {name:'name',label:'Name',type:'text',required:true},\r\n {name:'email',label:'Email',type:'email'},\r\n {name:'phone',label:'Phone',type:'tel'},\r\n {name:'type',label:'Type',type:'select',options:['buyer','seller','agent','vendor','other']},\r\n {name:'company',label:'Company',type:'text'},\r\n {name:'notes',label:'Notes',type:'textarea'}\r\n ]\r\n },\r\n properties: {\r\n title: 'Property',\r\n fields: [\r\n {name:'title',label:'Title',type:'text',required:true},\r\n {name:'address',label:'Address',type:'text',required:true},\r\n {name:'type',label:'Property Type',type:'select',options:['house','apartment','condo','land','commercial']},\r\n {name:'price',label:'Price ($)',type:'number'},\r\n {name:'status',label:'Status',type:'select',options:['active','pending','sold','rented','off-market']},\r\n {name:'bedrooms',label:'Bedrooms',type:'number'},\r\n {name:'bathrooms',label:'Bathrooms',type:'number'},\r\n {name:'sqft',label:'Square Feet',type:'number'},\r\n {name:'description',label:'Description',type:'textarea'},\r\n {name:'ownerId',label:'Owner ID',type:'text'}\r\n ]\r\n },\r\n deals: {\r\n title: 'Deal',\r\n fields: [\r\n {name:'propertyId',label:'Property ID',type:'text'},\r\n {name:'buyerId',label:'Buyer ID',type:'text'},\r\n {name:'sellerId',label:'Seller ID',type:'text'},\r\n {name:'agentId',label:'Agent ID',type:'text'},\r\n {name:'stage',label:'Stage',type:'select',options:['lead','viewing','offer','negotiation','closed-won','closed-lost']},\r\n {name:'amount',label:'Amount ($)',type:'number'},\r\n {name:'notes',label:'Notes',type:'textarea'}\r\n ]\r\n },\r\n tasks: {\r\n title: 'Task',\r\n fields: [\r\n {name:'title',label:'Title',type:'text',required:true},\r\n {name:'description',label:'Description',type:'textarea'},\r\n {name:'entityType',label:'Related To',type:'select',options:['','contact','property','deal']},\r\n {name:'entityId',label:'Related ID',type:'text'},\r\n {name:'dueDate',label:'Due Date',type:'date'},\r\n {name:'status',label:'Status',type:'select',options:['pending','in-progress','completed']},\r\n {name:'priority',label:'Priority',type:'select',options:['low','medium','high']},\r\n {name:'assignedTo',label:'Assigned To',type:'text'}\r\n ]\r\n }\r\n },\r\n\r\n init() {\r\n const saved = localStorage.getItem('recrm_api_url');\r\n if (saved) {\r\n this.apiUrl = saved;\r\n document.getElementById('recrm-setup').style.display = 'none';\r\n document.getElementById('recrm-content').style.display = 'block';\r\n this.navigate('dashboard');\r\n } else {\r\n document.getElementById('recrm-setup').style.display = 'block';\r\n document.getElementById('recrm-content').style.display = 'none';\r\n }\r\n\r\n document.querySelectorAll('.recrm-nav a').forEach(el => {\r\n el.addEventListener('click', e => {\r\n this.navigate(el.dataset.section);\r\n document.getElementById('recrm-sidebar').classList.remove('open');\r\n });\r\n });\r\n\r\n document.getElementById('recrm-hamburger').addEventListener('click', () => {\r\n document.getElementById('recrm-sidebar').classList.toggle('open');\r\n });\r\n\r\n document.getElementById('recrm-modal').addEventListener('click', e => {\r\n if (e.target === document.getElementById('recrm-modal')) this.closeModal();\r\n });\r\n },\r\n\r\n navigate(section) {\r\n if (!this.sections.includes(section)) return;\r\n document.querySelectorAll('.recrm-nav a').forEach(a => a.classList.remove('active'));\r\n document.querySelector(`.recrm-nav a[data-section=\"${section}\"]`)?.classList.add('active');\r\n document.querySelectorAll('.recrm-section').forEach(s => s.classList.remove('active'));\r\n const el = document.getElementById(`section-${section}`);\r\n if (el) el.classList.add('active');\r\n this.sheet = section;\r\n const titles = {dashboard:'Dashboard',contacts:'Contacts',properties:'Properties',deals:'Deals',tasks:'Tasks',settings:'Settings'};\r\n document.getElementById('recrm-page-title').textContent = titles[section] || section;\r\n const actions = document.getElementById('recrm-page-actions');\r\n actions.innerHTML = '';\r\n if (section !== 'dashboard' && section !== 'settings') {\r\n const btn = document.createElement('button');\r\n btn.className = 'recrm-btn recrm-btn-primary';\r\n btn.innerHTML = '<i class=\"fas fa-plus\"><\/i> Add ' + titles[section].slice(0,-1);\r\n btn.onclick = () => this.showForm(section);\r\n actions.appendChild(btn);\r\n const refresh = document.createElement('button');\r\n refresh.className = 'recrm-btn recrm-btn-outline';\r\n refresh.innerHTML = '<i class=\"fas fa-sync-alt\"><\/i>';\r\n refresh.onclick = () => this.loadSection(section);\r\n actions.appendChild(refresh);\r\n }\r\n if (section === 'settings') this.renderSettings();\r\n else this.loadSection(section);\r\n },\r\n\r\n async api(method, params = {}, body = null) {\r\n if (!this.apiUrl) throw new Error('API URL not configured');\r\n const query = new URLSearchParams(params).toString();\r\n const url = this.apiUrl + (query ? '?' + query : '');\r\n const opts = { method };\r\n if (body) {\r\n if (method === 'GET') {\r\n opts.method = 'POST';\r\n opts.headers = {'Content-Type':'text\/plain'};\r\n opts.body = JSON.stringify(body);\r\n } else {\r\n opts.headers = {'Content-Type':'text\/plain'};\r\n opts.body = JSON.stringify(body);\r\n }\r\n }\r\n const res = await fetch(url, opts);\r\n return res.json();\r\n },\r\n\r\n async loadSection(section) {\r\n const el = document.getElementById(`section-${section}`);\r\n if (!el) return;\r\n el.innerHTML = '<div style=\"text-align:center;padding:40px;color:var(--gray)\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:24px\"><\/i><p style=\"margin-top:12px\">Loading...<\/p><\/div>';\r\n try {\r\n if (section === 'dashboard') await this.loadDashboard();\r\n else await this.loadTable(section);\r\n } catch(e) {\r\n el.innerHTML = `<div class=\"recrm-empty\"><i class=\"fas fa-exclamation-triangle\" style=\"color:var(--danger)\"><\/i><p>Error loading data: ${e.message}<\/p><\/div>`;\r\n }\r\n },\r\n\r\n async loadDashboard() {\r\n const el = document.getElementById('section-dashboard');\r\n el.innerHTML = '<div style=\"text-align:center;padding:40px;color:var(--gray)\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:24px\"><\/i><\/div>';\r\n const [contacts, properties, deals, tasks] = await Promise.all([\r\n this.api('GET',{sheet:'contacts',action:'stats'}),\r\n this.api('GET',{sheet:'properties',action:'stats'}),\r\n this.api('GET',{sheet:'deals',action:'stats'}),\r\n this.api('GET',{sheet:'tasks',action:'stats'})\r\n ]);\r\n const cStats = contacts.stats || {total:0};\r\n const pStats = properties.stats || {total:0,totalValue:0};\r\n const dStats = deals.stats || {total:0,totalDealValue:0,lead:0,viewing:0,offer:0,negotiation:0,'closed-won':0,'closed-lost':0};\r\n const tStats = tasks.stats || {total:0,dueToday:0,overdue:0};\r\n el.innerHTML = `\r\n <div class=\"recrm-cards\">\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon blue\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Total Contacts<\/div>\r\n <div class=\"recrm-card-value\">${cStats.total}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon green\"><i class=\"fas fa-home\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Active Properties<\/div>\r\n <div class=\"recrm-card-value\">${pStats.activeCounts?.active || 0}<\/div>\r\n <div class=\"recrm-card-sub\">Total value: $${this.formatNumber(pStats.totalValue)}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon yellow\"><i class=\"fas fa-handshake\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Active Deals<\/div>\r\n <div class=\"recrm-card-value\">${(dStats.lead||0)+(dStats.viewing||0)+(dStats.offer||0)+(dStats.negotiation||0)}<\/div>\r\n <div class=\"recrm-card-sub\">Pipeline value: $${this.formatNumber(dStats.totalDealValue)}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon red\"><i class=\"fas fa-tasks\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Tasks Due Today<\/div>\r\n <div class=\"recrm-card-value\">${tStats.dueToday||0}<\/div>\r\n <div class=\"recrm-card-sub\">${tStats.overdue||0} overdue<\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Deal Pipeline<\/div>\r\n ${['lead','viewing','offer','negotiation','closed-won','closed-lost'].map(s => `\r\n <div style=\"display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid var(--border)\">\r\n <span style=\"text-transform:capitalize;color:var(--gray)\">${s.replace('-',' ')}<\/span>\r\n <span style=\"font-weight:600\">${dStats[s]||0}<\/span>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Quick Actions<\/div>\r\n <div style=\"display:flex;flex-direction:column;gap:8px\">\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.navigate('contacts');App.showForm('contacts')\"><i class=\"fas fa-plus\"><\/i> Add Contact<\/button>\r\n <button class=\"recrm-btn recrm-btn-success\" onclick=\"App.navigate('properties');App.showForm('properties')\"><i class=\"fas fa-plus\"><\/i> Add Property<\/button>\r\n <button class=\"recrm-btn recrm-btn-warning\" onclick=\"App.navigate('deals');App.showForm('deals')\"><i class=\"fas fa-plus\"><\/i> Add Deal<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.navigate('tasks');App.showForm('tasks')\"><i class=\"fas fa-plus\"><\/i> Add Task<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n },\r\n\r\n async loadTable(section) {\r\n const result = await this.api('GET', {sheet:section, action:'read'});\r\n if (!result.success) throw new Error(result.error || 'Failed to load data');\r\n const data = result.data || [];\r\n const el = document.getElementById(`section-${section}`);\r\n if (data.length === 0) {\r\n el.innerHTML = `<div class=\"recrm-empty\"><i class=\"fas fa-inbox\"><\/i><p>No ${section} yet. Click \"Add ${this.FORM_DEFS[section]?.title || section}\" to create one.<\/p><\/div>`;\r\n return;\r\n }\r\n const def = this.FORM_DEFS[section];\r\n const headers = def.fields.map(f => f.label);\r\n el.innerHTML = `\r\n <div class=\"recrm-table-wrap\">\r\n <div class=\"recrm-table-toolbar\">\r\n <div class=\"recrm-search\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" placeholder=\"Search ${section}...\" oninput=\"App.searchTable('${section}', this.value)\" id=\"recrm-search-${section}\">\r\n <\/div>\r\n <div class=\"recrm-filters\">\r\n ${def.fields.filter(f => f.type==='select').slice(0,2).map(f => `\r\n <select onchange=\"App.filterTable('${section}', '${f.name}', this.value)\">\r\n <option value=\"\">All ${f.label}<\/option>\r\n ${(f.options||[]).map(o => `<option value=\"${o}\">${o}<\/option>`).join('')}\r\n <\/select>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n <div style=\"overflow-x:auto\" id=\"recrm-table-body-${section}\">\r\n ${this.renderTable(section, data)}\r\n <\/div>\r\n <\/div>`;\r\n this._cachedData = this._cachedData || {};\r\n this._cachedData[section] = data;\r\n },\r\n\r\n renderTable(section, data) {\r\n const def = this.FORM_DEFS[section];\r\n if (!def || data.length === 0) return `<div class=\"recrm-empty\"><p>No records found<\/p><\/div>`;\r\n const skipFields = ['createdAt','updatedAt','id'];\r\n const cols = def.fields.filter(f => !skipFields.includes(f.name));\r\n const labelMap = {};\r\n def.fields.forEach(f => labelMap[f.name] = f.label);\r\n return `<table class=\"recrm-table\">\r\n <thead><tr>${cols.map(f => `<th>${f.label}<\/th>`).join('')}<th style=\"width:80px\">Actions<\/th><\/tr><\/thead>\r\n <tbody>${data.map(r => `<tr>\r\n ${cols.map(f => {\r\n let val = r[f.name];\r\n if (val === undefined || val === null) val = '';\r\n val = String(val);\r\n if (f.name === 'status' || f.name === 'stage' || f.name === 'type' || f.name === 'priority') {\r\n const colors = {active:'green',pending:'yellow',sold:'blue',rented:'purple','off-market':'gray',lead:'blue',viewing:'yellow',offer:'orange',negotiation:'purple','closed-won':'green','closed-lost':'red',buyer:'blue',seller:'green',agent:'purple',vendor:'orange',other:'gray',high:'red',medium:'yellow',low:'gray','in-progress':'yellow',completed:'green'};\r\n const c = colors[val.toLowerCase()] || 'gray';\r\n return `<td><span class=\"recrm-badge recrm-badge-${c}\">${val.replace(\/-\/g,' ') || '-'}<\/span><\/td>`;\r\n }\r\n if (f.name === 'price' || f.name === 'amount') {\r\n return `<td>${val ? '$' + this.formatNumber(val) : '-'}<\/td>`;\r\n }\r\n if (f.name === 'dueDate' && val) {\r\n const d = new Date(val);\r\n const today = new Date();\r\n const isOverdue = d < today && r.status !== 'completed';\r\n return `<td${isOverdue ? ' style=\"color:var(--danger);font-weight:600\"' : ''}>${val.split('T')[0] || val}<\/td>`;\r\n }\r\n if (val && val.length > 40) val = val.substr(0, 40) + '...';\r\n return `<td>${val || '-'}<\/td>`;\r\n }).join('')}\r\n <td><div class=\"recrm-actions\">\r\n <button class=\"recrm-btn recrm-btn-icon recrm-btn-sm\" onclick=\"App.editRecord('${section}','${r.id}')\" title=\"Edit\"><i class=\"fas fa-edit\"><\/i><\/button>\r\n <button class=\"recrm-btn recrm-btn-icon recrm-btn-sm\" onclick=\"App.deleteRecord('${section}','${r.id}')\" title=\"Delete\" style=\"color:var(--danger)\"><i class=\"fas fa-trash\"><\/i><\/button>\r\n <\/div><\/td>\r\n <\/tr>`).join('')}<\/tbody>\r\n <\/table>`;\r\n },\r\n\r\n searchTable(section, query) {\r\n const data = this._cachedData?.[section] || [];\r\n if (!query) { document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, data); return; }\r\n const q = query.toLowerCase();\r\n const filtered = data.filter(r => Object.values(r).some(v => String(v||'').toLowerCase().includes(q)));\r\n document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, filtered);\r\n },\r\n\r\n filterTable(section, field, value) {\r\n const data = this._cachedData?.[section] || [];\r\n if (!value) { document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, data); return; }\r\n const filtered = data.filter(r => String(r[field]||'') === value);\r\n document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, filtered);\r\n },\r\n\r\n showForm(section, editData) {\r\n const def = this.FORM_DEFS[section];\r\n if (!def) return;\r\n this.sheet = section;\r\n this.editingId = editData ? editData.id : null;\r\n document.getElementById('recrm-modal-title').textContent = (editData ? 'Edit ' : 'Add ') + def.title;\r\n document.getElementById('recrm-form-submit').innerHTML = '<i class=\"fas fa-save\"><\/i> ' + (editData ? 'Update' : 'Save');\r\n const form = document.getElementById('recrm-form');\r\n form.innerHTML = def.fields.map(f => {\r\n let html = `<div class=\"recrm-form-group\"><label>${f.label}${f.required?' <span style=\"color:var(--danger)\">*<\/span>':''}<\/label>`;\r\n const val = editData ? (editData[f.name] || '') : '';\r\n if (f.type === 'select') {\r\n html += `<select name=\"${f.name}\" ${f.required?'required':''}>`;\r\n html += `<option value=\"\">Select ${f.label.toLowerCase()}...<\/option>`;\r\n (f.options||[]).forEach(o => {\r\n html += `<option value=\"${o}\"${val===o?' selected':''}>${o}<\/option>`;\r\n });\r\n html += `<\/select>`;\r\n } else if (f.type === 'textarea') {\r\n html += `<textarea name=\"${f.name}\" ${f.required?'required':''}>${val}<\/textarea>`;\r\n } else {\r\n html += `<input type=\"${f.type}\" name=\"${f.name}\" value=\"${val}\" ${f.required?'required':''}>`;\r\n }\r\n html += `<\/div>`;\r\n return html;\r\n }).join('');\r\n document.getElementById('recrm-modal').classList.add('open');\r\n },\r\n\r\n closeModal() {\r\n document.getElementById('recrm-modal').classList.remove('open');\r\n this.editingId = null;\r\n },\r\n\r\n async handleFormSubmit(e) {\r\n e.preventDefault();\r\n const form = document.getElementById('recrm-form');\r\n const data = {};\r\n new FormData(form).forEach((val, key) => { data[key] = val; });\r\n if (this.editingId) data.id = this.editingId;\r\n const btn = document.getElementById('recrm-form-submit');\r\n btn.classList.add('recrm-saving');\r\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Saving...';\r\n try {\r\n const action = this.editingId ? 'update' : 'create';\r\n const result = await this.api('POST', {sheet:this.sheet, action}, data);\r\n if (!result.success) throw new Error(result.error || 'Failed to save');\r\n this.showToast(result.message || 'Saved successfully', 'success');\r\n this.closeModal();\r\n this.loadSection(this.sheet);\r\n } catch(e) {\r\n this.showToast('Error: ' + e.message, 'error');\r\n }\r\n btn.classList.remove('recrm-saving');\r\n btn.innerHTML = '<i class=\"fas fa-save\"><\/i> ' + (this.editingId ? 'Update' : 'Save');\r\n return false;\r\n },\r\n\r\n async editRecord(section, id) {\r\n try {\r\n const result = await this.api('GET', {sheet:section, action:'read', id});\r\n if (!result.success || !result.data) throw new Error('Record not found');\r\n this.showForm(section, result.data);\r\n } catch(e) {\r\n this.showToast('Error loading record: ' + e.message, 'error');\r\n }\r\n },\r\n\r\n async deleteRecord(section, id) {\r\n if (!confirm('Are you sure you want to delete this record? This cannot be undone.')) return;\r\n try {\r\n const result = await this.api('POST', {sheet:section, action:'delete'}, {id});\r\n if (!result.success) throw new Error(result.error || 'Failed to delete');\r\n this.showToast(result.message || 'Deleted successfully', 'success');\r\n this.loadSection(section);\r\n } catch(e) {\r\n this.showToast('Error: ' + e.message, 'error');\r\n }\r\n },\r\n\r\n showToast(msg, type = 'info') {\r\n const container = document.getElementById('recrm-toast');\r\n const toast = document.createElement('div');\r\n toast.className = `recrm-toast recrm-toast-${type}`;\r\n const icons = {success:'check-circle',error:'times-circle',warning:'exclamation-triangle',info:'info-circle'};\r\n toast.innerHTML = `<i class=\"fas fa-${icons[type]||icons.info}\"><\/i> ${msg}`;\r\n container.appendChild(toast);\r\n setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity .3s'; setTimeout(() => toast.remove(), 300); }, 3000);\r\n },\r\n\r\n connect() {\r\n const url = document.getElementById('recrm-api-url').value.trim();\r\n if (!url) { this.showToast('Please enter the API URL', 'warning'); return; }\r\n if (!url.startsWith('http')) { this.showToast('Please enter a valid URL', 'warning'); return; }\r\n localStorage.setItem('recrm_api_url', url);\r\n this.apiUrl = url;\r\n this.showToast('Connected successfully!', 'success');\r\n document.getElementById('recrm-setup').style.display = 'none';\r\n document.getElementById('recrm-content').style.display = 'block';\r\n this.navigate('dashboard');\r\n },\r\n\r\n showSetupHelp() {\r\n document.getElementById('recrm-setup-help').style.display = 'flex';\r\n },\r\n\r\n renderSettings() {\r\n const el = document.getElementById('section-settings');\r\n el.innerHTML = `\r\n <div style=\"max-width:600px\">\r\n <div class=\"recrm-card\" style=\"margin-bottom:16px\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">API Configuration<\/div>\r\n <div class=\"recrm-form-group\">\r\n <label>Google Apps Script Web App URL<\/label>\r\n <input type=\"url\" id=\"recrm-settings-url\" value=\"${this.apiUrl}\" style=\"width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px\">\r\n <\/div>\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.saveSettings()\"><i class=\"fas fa-save\"><\/i> Save<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.testConnection()\" style=\"margin-left:8px\"><i class=\"fas fa-plug\"><\/i> Test Connection<\/button>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Data<\/div>\r\n <p style=\"font-size:13px;color:var(--gray);margin-bottom:12px\">Your data is stored in Google Sheets. The following tabs are used:<\/p>\r\n <ul style=\"font-size:13px;padding-left:20px;line-height:1.8;color:var(--gray)\">\r\n <li><strong>Contacts<\/strong> - Buyers, sellers, agents, vendors<\/li>\r\n <li><strong>Properties<\/strong> - Listings with status, price, details<\/li>\r\n <li><strong>Deals<\/strong> - Pipeline stages from lead to closed<\/li>\r\n <li><strong>Tasks<\/strong> - To-dos with due dates and priorities<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>`;\r\n },\r\n\r\n saveSettings() {\r\n const url = document.getElementById('recrm-settings-url').value.trim();\r\n if (!url) { this.showToast('Please enter a URL', 'warning'); return; }\r\n localStorage.setItem('recrm_api_url', url);\r\n this.apiUrl = url;\r\n this.showToast('Settings saved', 'success');\r\n },\r\n\r\n async testConnection() {\r\n const btn = document.querySelector('#section-settings .recrm-btn-primary');\r\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Testing...';\r\n btn.disabled = true;\r\n try {\r\n const result = await this.api('GET', {sheet:'contacts', action:'read'});\r\n if (result.success) {\r\n this.showToast('Connection successful! Found ' + (result.data||[]).length + ' contacts.', 'success');\r\n } else {\r\n throw new Error(result.error || 'Unknown error');\r\n }\r\n } catch(e) {\r\n this.showToast('Connection failed: ' + e.message, 'error');\r\n }\r\n btn.innerHTML = '<i class=\"fas fa-plug\"><\/i> Test Connection';\r\n btn.disabled = false;\r\n },\r\n\r\n formatNumber(n) {\r\n n = parseFloat(n) || 0;\r\n if (n >= 1000000) return (n\/1000000).toFixed(1) + 'M';\r\n if (n >= 1000) return n.toLocaleString('en-US');\r\n return n.toLocaleString('en-US');\r\n }\r\n};\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => App.init());\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RealEstate CRM RealCRM Dashboard Contacts Properties Deals Tasks Settings Connect Your Google Sheet Enter your Google Apps Script Web App URL to connect the CRM to your Google Sheet. After deploying Code.gs as a web app, paste the URL here. Connect How to set up? Dashboard Add Record × Cancel Save How to Set Up … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/lilodhyanresort.com\/index.php\/liloclint-2026\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\"> “LiloClint 2026”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9711","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/comments?post=9711"}],"version-history":[{"count":5,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711\/revisions"}],"predecessor-version":[{"id":9717,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711\/revisions\/9717"}],"wp:attachment":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/media?parent=9711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nRealEstate CRM<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n.recrm-app{--primary:#2563eb;--primary-dark:#1d4ed8;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--dark:#1e293b;--gray:#64748b;--light:#f8fafc;--border:#e2e8f0;--shadow:0 1px 3px rgba(0,0,0,.1);--shadow-lg:0 10px 25px rgba(0,0,0,.15);--radius:8px;--sidebar-w:240px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--dark);background:var(--light);min-height:100vh;display:flex}\r\n.recrm-app *{box-sizing:border-box}\r\n.recrm-sidebar{width:var(--sidebar-w);background:var(--dark);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform .3s}\r\n.recrm-logo{padding:20px;font-size:18px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}\r\n.recrm-logo i{color:var(--primary);font-size:22px}\r\n.recrm-nav{padding:12px 0;flex:1;overflow-y:auto}\r\n.recrm-nav a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:all .15s;border-left:3px solid transparent;cursor:pointer}\r\n.recrm-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}\r\n.recrm-nav a.active{color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--primary);font-weight:600}\r\n.recrm-nav a i{width:18px;text-align:center;font-size:16px}\r\n.recrm-main{flex:1;margin-left:var(--sidebar-w);padding:24px 32px;min-height:100vh;max-width:100%}\r\n.recrm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}\r\n.recrm-header h1{font-size:22px;font-weight:700}\r\n.recrm-header-actions{display:flex;gap:8px;align-items:center}\r\n.recrm-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1}\r\n.recrm-btn-primary{background:var(--primary);color:#fff}\r\n.recrm-btn-primary:hover{background:var(--primary-dark)}\r\n.recrm-btn-success{background:var(--success);color:#fff}\r\n.recrm-btn-success:hover{background:#15803d}\r\n.recrm-btn-danger{background:var(--danger);color:#fff}\r\n.recrm-btn-danger:hover{background:#b91c1c}\r\n.recrm-btn-warning{background:var(--warning);color:#fff}\r\n.recrm-btn-warning:hover{background:#b45309}\r\n.recrm-btn-outline{background:transparent;border:1px solid var(--border);color:var(--gray)}\r\n.recrm-btn-outline:hover{background:var(--light);border-color:var(--gray)}\r\n.recrm-btn-sm{padding:5px 10px;font-size:12px}\r\n.recrm-btn-icon{padding:6px;border-radius:4px;background:transparent;border:1px solid var(--border);color:var(--gray);cursor:pointer;transition:all .15s;font-size:13px}\r\n.recrm-btn-icon:hover{background:var(--light);color:var(--dark)}\r\n.recrm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}\r\n.recrm-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border)}\r\n.recrm-card-label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}\r\n.recrm-card-value{font-size:28px;font-weight:700;margin-bottom:4px}\r\n.recrm-card-sub{font-size:12px;color:var(--gray)}\r\n.recrm-card .recrm-card-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}\r\n.recrm-card-icon.blue{background:#dbeafe;color:var(--primary)}\r\n.recrm-card-icon.green{background:#dcfce7;color:var(--success)}\r\n.recrm-card-icon.yellow{background:#fef3c7;color:var(--warning)}\r\n.recrm-card-icon.red{background:#fee2e2;color:var(--danger)}\r\n.recrm-section{display:none}\r\n.recrm-section.active{display:block}\r\n.recrm-table-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}\r\n.recrm-table-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px}\r\n.recrm-table-toolbar .recrm-search{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--light)}\r\n.recrm-table-toolbar .recrm-search input{border:none;background:none;outline:none;font-size:13px;min-width:180px;color:var(--dark)}\r\n.recrm-table-toolbar .recrm-search i{color:var(--gray);font-size:14px}\r\n.recrm-table-toolbar .recrm-filters{display:flex;gap:8px;flex-wrap:wrap}\r\n.recrm-table-toolbar select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;color:var(--dark)}\r\n.recrm-table{width:100%;border-collapse:collapse}\r\n.recrm-table th{padding:10px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);background:var(--light);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}\r\n.recrm-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}\r\n.recrm-table tr:hover td{background:var(--light)}\r\n.recrm-table .recrm-actions{display:flex;gap:4px}\r\n.recrm-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600}\r\n.recrm-badge-blue{background:#dbeafe;color:#1d4ed8}\r\n.recrm-badge-green{background:#dcfce7;color:#15803d}\r\n.recrm-badge-yellow{background:#fef3c7;color:#b45309}\r\n.recrm-badge-red{background:#fee2e2;color:#b91c1c}\r\n.recrm-badge-gray{background:#f1f5f9;color:#475569}\r\n.recrm-badge-purple{background:#f3e8ff;color:#7c3aed}\r\n.recrm-badge-orange{background:#ffedd5;color:#c2410c}\r\n.recrm-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;padding:20px}\r\n.recrm-modal-overlay.open{display:flex}\r\n.recrm-modal{background:#fff;border-radius:12px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}\r\n.recrm-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}\r\n.recrm-modal-header h3{font-size:18px;font-weight:700}\r\n.recrm-modal-close{background:none;border:none;font-size:24px;color:var(--gray);cursor:pointer;padding:0;line-height:1}\r\n.recrm-modal-close:hover{color:var(--dark)}\r\n.recrm-modal-body{padding:20px 24px}\r\n.recrm-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border)}\r\n.recrm-form-group{margin-bottom:16px}\r\n.recrm-form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--dark)}\r\n.recrm-form-group input,.recrm-form-group select,.recrm-form-group textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;background:#fff;color:var(--dark);transition:border-color .15s}\r\n.recrm-form-group input:focus,.recrm-form-group select:focus,.recrm-form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}\r\n.recrm-form-group textarea{min-height:80px;resize:vertical}\r\n.recrm-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}\r\n.recrm-toast-container{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}\r\n.recrm-toast{padding:12px 20px;border-radius:8px;color:#fff;font-size:14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:recrmSlideIn .3s ease;max-width:360px}\r\n.recrm-toast-success{background:var(--success)}\r\n.recrm-toast-error{background:var(--danger)}\r\n.recrm-toast-warning{background:var(--warning)}\r\n.recrm-toast-info{background:var(--primary)}\r\n@keyframes recrmSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}\r\n.recrm-empty{text-align:center;padding:40px 20px;color:var(--gray)}\r\n.recrm-empty i{font-size:40px;margin-bottom:12px;opacity:.4}\r\n.recrm-empty p{font-size:14px}\r\n.recrm-status-bar{padding:4px 0}\r\n.recrm-status-bar .recrm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}\r\n.recrm-dot-green{background:var(--success)}\r\n.recrm-dot-yellow{background:var(--warning)}\r\n.recrm-dot-red{background:var(--danger)}\r\n.recrm-dot-gray{background:var(--gray)}\r\n.recrm-dot-blue{background:var(--primary)}\r\n.recrm-setup{max-width:500px;margin:60px auto;text-align:center}\r\n.recrm-setup h2{margin-bottom:8px}\r\n.recrm-setup p{color:var(--gray);font-size:14px;margin-bottom:24px}\r\n.recrm-setup input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:6px;font-size:14px;margin-bottom:12px}\r\n.recrm-setup input:focus{outline:none;border-color:var(--primary)}\r\n.recrm-saving{opacity:.6;pointer-events:none}\r\n.hamburger{display:none;background:none;border:none;color:var(--dark);font-size:20px;cursor:pointer;padding:4px}\r\n@media(max-width:768px){\r\n .recrm-sidebar{transform:translateX(-100%)}\r\n .recrm-sidebar.open{transform:translateX(0)}\r\n .recrm-main{margin-left:0;padding:16px}\r\n .hamburger{display:block}\r\n .recrm-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}\r\n .recrm-form-row{grid-template-columns:1fr}\r\n}\r\n@media(max-width:480px){\r\n .recrm-cards{grid-template-columns:1fr}\r\n .recrm-table-toolbar{flex-direction:column;align-items:stretch}\r\n .recrm-table-toolbar .recrm-search input{min-width:auto;width:100%}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"recrm-app\" id=\"recrm-app\">\r\n <aside class=\"recrm-sidebar\" id=\"recrm-sidebar\">\r\n <div class=\"recrm-logo\"><i class=\"fas fa-building\"><\/i> RealCRM<\/div>\r\n <nav class=\"recrm-nav\">\r\n <a class=\"active\" data-section=\"dashboard\"><i class=\"fas fa-chart-pie\"><\/i> Dashboard<\/a>\r\n <a data-section=\"contacts\"><i class=\"fas fa-address-book\"><\/i> Contacts<\/a>\r\n <a data-section=\"properties\"><i class=\"fas fa-home\"><\/i> Properties<\/a>\r\n <a data-section=\"deals\"><i class=\"fas fa-handshake\"><\/i> Deals<\/a>\r\n <a data-section=\"tasks\"><i class=\"fas fa-tasks\"><\/i> Tasks<\/a>\r\n <\/nav>\r\n <div style=\"padding:12px 20px;border-top:1px solid rgba(255,255,255,.1)\">\r\n <a style=\"display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;cursor:pointer\" data-section=\"settings\"><i class=\"fas fa-cog\"><\/i> Settings<\/a>\r\n <\/div>\r\n <\/aside>\r\n\r\n <main class=\"recrm-main\">\r\n <button class=\"hamburger\" id=\"recrm-hamburger\"><i class=\"fas fa-bars\"><\/i><\/button>\r\n\r\n <div id=\"recrm-setup\" class=\"recrm-setup\" style=\"display:none\">\r\n <i class=\"fas fa-plug\" style=\"font-size:48px;color:var(--primary);margin-bottom:16px\"><\/i>\r\n <h2>Connect Your Google Sheet<\/h2>\r\n <p>Enter your Google Apps Script Web App URL to connect the CRM to your Google Sheet.<\/p>\r\n <input type=\"url\" id=\"recrm-api-url\" placeholder=\"https:\/\/script.google.com\/macros\/s\/...\/exec\">\r\n <p style=\"font-size:12px;color:var(--gray);margin-bottom:16px\">After deploying Code.gs as a web app, paste the URL here.<\/p>\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.connect()\"><i class=\"fas fa-link\"><\/i> Connect<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.showSetupHelp()\" style=\"margin-top:8px\"><i class=\"fas fa-question-circle\"><\/i> How to set up?<\/button>\r\n <\/div>\r\n\r\n <div id=\"recrm-content\" style=\"display:none\">\r\n <div class=\"recrm-header\">\r\n <h1 id=\"recrm-page-title\">Dashboard<\/h1>\r\n <div class=\"recrm-header-actions\" id=\"recrm-page-actions\"><\/div>\r\n <\/div>\r\n\r\n <section id=\"section-dashboard\" class=\"recrm-section active\"><\/section>\r\n <section id=\"section-contacts\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-properties\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-deals\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-tasks\" class=\"recrm-section\"><\/section>\r\n <section id=\"section-settings\" class=\"recrm-section\"><\/section>\r\n <\/div>\r\n <\/main>\r\n<\/div>\r\n\r\n<div class=\"recrm-modal-overlay\" id=\"recrm-modal\">\r\n <div class=\"recrm-modal\">\r\n <div class=\"recrm-modal-header\">\r\n <h3 id=\"recrm-modal-title\">Add Record<\/h3>\r\n <button class=\"recrm-modal-close\" onclick=\"App.closeModal()\">×<\/button>\r\n <\/div>\r\n <div class=\"recrm-modal-body\">\r\n <form id=\"recrm-form\" onsubmit=\"return App.handleFormSubmit(event)\"><\/form>\r\n <\/div>\r\n <div class=\"recrm-modal-footer\">\r\n <button type=\"button\" class=\"recrm-btn recrm-btn-outline\" onclick=\"App.closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" form=\"recrm-form\" class=\"recrm-btn recrm-btn-primary\" id=\"recrm-form-submit\"><i class=\"fas fa-save\"><\/i> Save<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"recrm-toast-container\" id=\"recrm-toast\"><\/div>\r\n\r\n<div id=\"recrm-setup-help\" class=\"recrm-modal-overlay\" style=\"display:none\">\r\n <div class=\"recrm-modal\" style=\"max-width:600px\">\r\n <div class=\"recrm-modal-header\">\r\n <h3>How to Set Up Google Sheets Backend<\/h3>\r\n <button class=\"recrm-modal-close\" onclick=\"document.getElementById('recrm-setup-help').style.display='none'\">×<\/button>\r\n <\/div>\r\n <div class=\"recrm-modal-body\" style=\"font-size:13px;line-height:1.6\">\r\n <ol style=\"padding-left:20px;display:flex;flex-direction:column;gap:10px\">\r\n <li><strong>Create a Google Sheet<\/strong> - Create a new blank sheet at sheets.google.com<\/li>\r\n <li><strong>Open Apps Script<\/strong> - Go to Extensions > Apps Script<\/li>\r\n <li><strong>Paste Code<\/strong> - Delete any default code and paste the entire content of <code>Code.gs<\/code><\/li>\r\n <li><strong>Deploy<\/strong> - Click \"Deploy\" > \"New deployment\", choose type \"Web app\"<\/li>\r\n <li><strong>Set Access<\/strong> - Execute as \"Me\", Who has access \"Anyone\"<\/li>\r\n <li><strong>Copy URL<\/strong> - After deploying, copy the Web App URL<\/li>\r\n <li><strong>Paste here<\/strong> - Paste the URL in the input field and click Connect<\/li>\r\n <\/ol>\r\n <p style=\"margin-top:12px;padding:10px;background:#fef3c7;border-radius:6px;font-size:12px\"><strong>Note:<\/strong> The sheet automatically creates the required tabs (Contacts, Properties, Deals, Tasks) when first accessed.<\/p>\r\n <\/div>\r\n <div class=\"recrm-modal-footer\">\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"document.getElementById('recrm-setup-help').style.display='none'\">Got it<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst App = {\r\n apiUrl: '',\r\n sheet: '',\r\n editingId: null,\r\n sections: ['dashboard','contacts','properties','deals','tasks','settings'],\r\n\r\n FORM_DEFS: {\r\n contacts: {\r\n title: 'Contact',\r\n fields: [\r\n {name:'name',label:'Name',type:'text',required:true},\r\n {name:'email',label:'Email',type:'email'},\r\n {name:'phone',label:'Phone',type:'tel'},\r\n {name:'type',label:'Type',type:'select',options:['buyer','seller','agent','vendor','other']},\r\n {name:'company',label:'Company',type:'text'},\r\n {name:'notes',label:'Notes',type:'textarea'}\r\n ]\r\n },\r\n properties: {\r\n title: 'Property',\r\n fields: [\r\n {name:'title',label:'Title',type:'text',required:true},\r\n {name:'address',label:'Address',type:'text',required:true},\r\n {name:'type',label:'Property Type',type:'select',options:['house','apartment','condo','land','commercial']},\r\n {name:'price',label:'Price ($)',type:'number'},\r\n {name:'status',label:'Status',type:'select',options:['active','pending','sold','rented','off-market']},\r\n {name:'bedrooms',label:'Bedrooms',type:'number'},\r\n {name:'bathrooms',label:'Bathrooms',type:'number'},\r\n {name:'sqft',label:'Square Feet',type:'number'},\r\n {name:'description',label:'Description',type:'textarea'},\r\n {name:'ownerId',label:'Owner ID',type:'text'}\r\n ]\r\n },\r\n deals: {\r\n title: 'Deal',\r\n fields: [\r\n {name:'propertyId',label:'Property ID',type:'text'},\r\n {name:'buyerId',label:'Buyer ID',type:'text'},\r\n {name:'sellerId',label:'Seller ID',type:'text'},\r\n {name:'agentId',label:'Agent ID',type:'text'},\r\n {name:'stage',label:'Stage',type:'select',options:['lead','viewing','offer','negotiation','closed-won','closed-lost']},\r\n {name:'amount',label:'Amount ($)',type:'number'},\r\n {name:'notes',label:'Notes',type:'textarea'}\r\n ]\r\n },\r\n tasks: {\r\n title: 'Task',\r\n fields: [\r\n {name:'title',label:'Title',type:'text',required:true},\r\n {name:'description',label:'Description',type:'textarea'},\r\n {name:'entityType',label:'Related To',type:'select',options:['','contact','property','deal']},\r\n {name:'entityId',label:'Related ID',type:'text'},\r\n {name:'dueDate',label:'Due Date',type:'date'},\r\n {name:'status',label:'Status',type:'select',options:['pending','in-progress','completed']},\r\n {name:'priority',label:'Priority',type:'select',options:['low','medium','high']},\r\n {name:'assignedTo',label:'Assigned To',type:'text'}\r\n ]\r\n }\r\n },\r\n\r\n init() {\r\n const saved = localStorage.getItem('recrm_api_url');\r\n if (saved) {\r\n this.apiUrl = saved;\r\n document.getElementById('recrm-setup').style.display = 'none';\r\n document.getElementById('recrm-content').style.display = 'block';\r\n this.navigate('dashboard');\r\n } else {\r\n document.getElementById('recrm-setup').style.display = 'block';\r\n document.getElementById('recrm-content').style.display = 'none';\r\n }\r\n\r\n document.querySelectorAll('.recrm-nav a').forEach(el => {\r\n el.addEventListener('click', e => {\r\n this.navigate(el.dataset.section);\r\n document.getElementById('recrm-sidebar').classList.remove('open');\r\n });\r\n });\r\n\r\n document.getElementById('recrm-hamburger').addEventListener('click', () => {\r\n document.getElementById('recrm-sidebar').classList.toggle('open');\r\n });\r\n\r\n document.getElementById('recrm-modal').addEventListener('click', e => {\r\n if (e.target === document.getElementById('recrm-modal')) this.closeModal();\r\n });\r\n },\r\n\r\n navigate(section) {\r\n if (!this.sections.includes(section)) return;\r\n document.querySelectorAll('.recrm-nav a').forEach(a => a.classList.remove('active'));\r\n document.querySelector(`.recrm-nav a[data-section=\"${section}\"]`)?.classList.add('active');\r\n document.querySelectorAll('.recrm-section').forEach(s => s.classList.remove('active'));\r\n const el = document.getElementById(`section-${section}`);\r\n if (el) el.classList.add('active');\r\n this.sheet = section;\r\n const titles = {dashboard:'Dashboard',contacts:'Contacts',properties:'Properties',deals:'Deals',tasks:'Tasks',settings:'Settings'};\r\n document.getElementById('recrm-page-title').textContent = titles[section] || section;\r\n const actions = document.getElementById('recrm-page-actions');\r\n actions.innerHTML = '';\r\n if (section !== 'dashboard' && section !== 'settings') {\r\n const btn = document.createElement('button');\r\n btn.className = 'recrm-btn recrm-btn-primary';\r\n btn.innerHTML = '<i class=\"fas fa-plus\"><\/i> Add ' + titles[section].slice(0,-1);\r\n btn.onclick = () => this.showForm(section);\r\n actions.appendChild(btn);\r\n const refresh = document.createElement('button');\r\n refresh.className = 'recrm-btn recrm-btn-outline';\r\n refresh.innerHTML = '<i class=\"fas fa-sync-alt\"><\/i>';\r\n refresh.onclick = () => this.loadSection(section);\r\n actions.appendChild(refresh);\r\n }\r\n if (section === 'settings') this.renderSettings();\r\n else this.loadSection(section);\r\n },\r\n\r\n async api(method, params = {}, body = null) {\r\n if (!this.apiUrl) throw new Error('API URL not configured');\r\n const query = new URLSearchParams(params).toString();\r\n const url = this.apiUrl + (query ? '?' + query : '');\r\n const opts = { method };\r\n if (body) {\r\n if (method === 'GET') {\r\n opts.method = 'POST';\r\n opts.headers = {'Content-Type':'text\/plain'};\r\n opts.body = JSON.stringify(body);\r\n } else {\r\n opts.headers = {'Content-Type':'text\/plain'};\r\n opts.body = JSON.stringify(body);\r\n }\r\n }\r\n const res = await fetch(url, opts);\r\n return res.json();\r\n },\r\n\r\n async loadSection(section) {\r\n const el = document.getElementById(`section-${section}`);\r\n if (!el) return;\r\n el.innerHTML = '<div style=\"text-align:center;padding:40px;color:var(--gray)\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:24px\"><\/i><p style=\"margin-top:12px\">Loading...<\/p><\/div>';\r\n try {\r\n if (section === 'dashboard') await this.loadDashboard();\r\n else await this.loadTable(section);\r\n } catch(e) {\r\n el.innerHTML = `<div class=\"recrm-empty\"><i class=\"fas fa-exclamation-triangle\" style=\"color:var(--danger)\"><\/i><p>Error loading data: ${e.message}<\/p><\/div>`;\r\n }\r\n },\r\n\r\n async loadDashboard() {\r\n const el = document.getElementById('section-dashboard');\r\n el.innerHTML = '<div style=\"text-align:center;padding:40px;color:var(--gray)\"><i class=\"fas fa-spinner fa-spin\" style=\"font-size:24px\"><\/i><\/div>';\r\n const [contacts, properties, deals, tasks] = await Promise.all([\r\n this.api('GET',{sheet:'contacts',action:'stats'}),\r\n this.api('GET',{sheet:'properties',action:'stats'}),\r\n this.api('GET',{sheet:'deals',action:'stats'}),\r\n this.api('GET',{sheet:'tasks',action:'stats'})\r\n ]);\r\n const cStats = contacts.stats || {total:0};\r\n const pStats = properties.stats || {total:0,totalValue:0};\r\n const dStats = deals.stats || {total:0,totalDealValue:0,lead:0,viewing:0,offer:0,negotiation:0,'closed-won':0,'closed-lost':0};\r\n const tStats = tasks.stats || {total:0,dueToday:0,overdue:0};\r\n el.innerHTML = `\r\n <div class=\"recrm-cards\">\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon blue\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Total Contacts<\/div>\r\n <div class=\"recrm-card-value\">${cStats.total}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon green\"><i class=\"fas fa-home\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Active Properties<\/div>\r\n <div class=\"recrm-card-value\">${pStats.activeCounts?.active || 0}<\/div>\r\n <div class=\"recrm-card-sub\">Total value: $${this.formatNumber(pStats.totalValue)}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon yellow\"><i class=\"fas fa-handshake\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Active Deals<\/div>\r\n <div class=\"recrm-card-value\">${(dStats.lead||0)+(dStats.viewing||0)+(dStats.offer||0)+(dStats.negotiation||0)}<\/div>\r\n <div class=\"recrm-card-sub\">Pipeline value: $${this.formatNumber(dStats.totalDealValue)}<\/div>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-icon red\"><i class=\"fas fa-tasks\"><\/i><\/div>\r\n <div class=\"recrm-card-label\">Tasks Due Today<\/div>\r\n <div class=\"recrm-card-value\">${tStats.dueToday||0}<\/div>\r\n <div class=\"recrm-card-sub\">${tStats.overdue||0} overdue<\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:16px\">\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Deal Pipeline<\/div>\r\n ${['lead','viewing','offer','negotiation','closed-won','closed-lost'].map(s => `\r\n <div style=\"display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid var(--border)\">\r\n <span style=\"text-transform:capitalize;color:var(--gray)\">${s.replace('-',' ')}<\/span>\r\n <span style=\"font-weight:600\">${dStats[s]||0}<\/span>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Quick Actions<\/div>\r\n <div style=\"display:flex;flex-direction:column;gap:8px\">\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.navigate('contacts');App.showForm('contacts')\"><i class=\"fas fa-plus\"><\/i> Add Contact<\/button>\r\n <button class=\"recrm-btn recrm-btn-success\" onclick=\"App.navigate('properties');App.showForm('properties')\"><i class=\"fas fa-plus\"><\/i> Add Property<\/button>\r\n <button class=\"recrm-btn recrm-btn-warning\" onclick=\"App.navigate('deals');App.showForm('deals')\"><i class=\"fas fa-plus\"><\/i> Add Deal<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.navigate('tasks');App.showForm('tasks')\"><i class=\"fas fa-plus\"><\/i> Add Task<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>`;\r\n },\r\n\r\n async loadTable(section) {\r\n const result = await this.api('GET', {sheet:section, action:'read'});\r\n if (!result.success) throw new Error(result.error || 'Failed to load data');\r\n const data = result.data || [];\r\n const el = document.getElementById(`section-${section}`);\r\n if (data.length === 0) {\r\n el.innerHTML = `<div class=\"recrm-empty\"><i class=\"fas fa-inbox\"><\/i><p>No ${section} yet. Click \"Add ${this.FORM_DEFS[section]?.title || section}\" to create one.<\/p><\/div>`;\r\n return;\r\n }\r\n const def = this.FORM_DEFS[section];\r\n const headers = def.fields.map(f => f.label);\r\n el.innerHTML = `\r\n <div class=\"recrm-table-wrap\">\r\n <div class=\"recrm-table-toolbar\">\r\n <div class=\"recrm-search\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" placeholder=\"Search ${section}...\" oninput=\"App.searchTable('${section}', this.value)\" id=\"recrm-search-${section}\">\r\n <\/div>\r\n <div class=\"recrm-filters\">\r\n ${def.fields.filter(f => f.type==='select').slice(0,2).map(f => `\r\n <select onchange=\"App.filterTable('${section}', '${f.name}', this.value)\">\r\n <option value=\"\">All ${f.label}<\/option>\r\n ${(f.options||[]).map(o => `<option value=\"${o}\">${o}<\/option>`).join('')}\r\n <\/select>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n <div style=\"overflow-x:auto\" id=\"recrm-table-body-${section}\">\r\n ${this.renderTable(section, data)}\r\n <\/div>\r\n <\/div>`;\r\n this._cachedData = this._cachedData || {};\r\n this._cachedData[section] = data;\r\n },\r\n\r\n renderTable(section, data) {\r\n const def = this.FORM_DEFS[section];\r\n if (!def || data.length === 0) return `<div class=\"recrm-empty\"><p>No records found<\/p><\/div>`;\r\n const skipFields = ['createdAt','updatedAt','id'];\r\n const cols = def.fields.filter(f => !skipFields.includes(f.name));\r\n const labelMap = {};\r\n def.fields.forEach(f => labelMap[f.name] = f.label);\r\n return `<table class=\"recrm-table\">\r\n <thead><tr>${cols.map(f => `<th>${f.label}<\/th>`).join('')}<th style=\"width:80px\">Actions<\/th><\/tr><\/thead>\r\n <tbody>${data.map(r => `<tr>\r\n ${cols.map(f => {\r\n let val = r[f.name];\r\n if (val === undefined || val === null) val = '';\r\n val = String(val);\r\n if (f.name === 'status' || f.name === 'stage' || f.name === 'type' || f.name === 'priority') {\r\n const colors = {active:'green',pending:'yellow',sold:'blue',rented:'purple','off-market':'gray',lead:'blue',viewing:'yellow',offer:'orange',negotiation:'purple','closed-won':'green','closed-lost':'red',buyer:'blue',seller:'green',agent:'purple',vendor:'orange',other:'gray',high:'red',medium:'yellow',low:'gray','in-progress':'yellow',completed:'green'};\r\n const c = colors[val.toLowerCase()] || 'gray';\r\n return `<td><span class=\"recrm-badge recrm-badge-${c}\">${val.replace(\/-\/g,' ') || '-'}<\/span><\/td>`;\r\n }\r\n if (f.name === 'price' || f.name === 'amount') {\r\n return `<td>${val ? '$' + this.formatNumber(val) : '-'}<\/td>`;\r\n }\r\n if (f.name === 'dueDate' && val) {\r\n const d = new Date(val);\r\n const today = new Date();\r\n const isOverdue = d < today && r.status !== 'completed';\r\n return `<td${isOverdue ? ' style=\"color:var(--danger);font-weight:600\"' : ''}>${val.split('T')[0] || val}<\/td>`;\r\n }\r\n if (val && val.length > 40) val = val.substr(0, 40) + '...';\r\n return `<td>${val || '-'}<\/td>`;\r\n }).join('')}\r\n <td><div class=\"recrm-actions\">\r\n <button class=\"recrm-btn recrm-btn-icon recrm-btn-sm\" onclick=\"App.editRecord('${section}','${r.id}')\" title=\"Edit\"><i class=\"fas fa-edit\"><\/i><\/button>\r\n <button class=\"recrm-btn recrm-btn-icon recrm-btn-sm\" onclick=\"App.deleteRecord('${section}','${r.id}')\" title=\"Delete\" style=\"color:var(--danger)\"><i class=\"fas fa-trash\"><\/i><\/button>\r\n <\/div><\/td>\r\n <\/tr>`).join('')}<\/tbody>\r\n <\/table>`;\r\n },\r\n\r\n searchTable(section, query) {\r\n const data = this._cachedData?.[section] || [];\r\n if (!query) { document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, data); return; }\r\n const q = query.toLowerCase();\r\n const filtered = data.filter(r => Object.values(r).some(v => String(v||'').toLowerCase().includes(q)));\r\n document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, filtered);\r\n },\r\n\r\n filterTable(section, field, value) {\r\n const data = this._cachedData?.[section] || [];\r\n if (!value) { document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, data); return; }\r\n const filtered = data.filter(r => String(r[field]||'') === value);\r\n document.getElementById(`recrm-table-body-${section}`).innerHTML = this.renderTable(section, filtered);\r\n },\r\n\r\n showForm(section, editData) {\r\n const def = this.FORM_DEFS[section];\r\n if (!def) return;\r\n this.sheet = section;\r\n this.editingId = editData ? editData.id : null;\r\n document.getElementById('recrm-modal-title').textContent = (editData ? 'Edit ' : 'Add ') + def.title;\r\n document.getElementById('recrm-form-submit').innerHTML = '<i class=\"fas fa-save\"><\/i> ' + (editData ? 'Update' : 'Save');\r\n const form = document.getElementById('recrm-form');\r\n form.innerHTML = def.fields.map(f => {\r\n let html = `<div class=\"recrm-form-group\"><label>${f.label}${f.required?' <span style=\"color:var(--danger)\">*<\/span>':''}<\/label>`;\r\n const val = editData ? (editData[f.name] || '') : '';\r\n if (f.type === 'select') {\r\n html += `<select name=\"${f.name}\" ${f.required?'required':''}>`;\r\n html += `<option value=\"\">Select ${f.label.toLowerCase()}...<\/option>`;\r\n (f.options||[]).forEach(o => {\r\n html += `<option value=\"${o}\"${val===o?' selected':''}>${o}<\/option>`;\r\n });\r\n html += `<\/select>`;\r\n } else if (f.type === 'textarea') {\r\n html += `<textarea name=\"${f.name}\" ${f.required?'required':''}>${val}<\/textarea>`;\r\n } else {\r\n html += `<input type=\"${f.type}\" name=\"${f.name}\" value=\"${val}\" ${f.required?'required':''}>`;\r\n }\r\n html += `<\/div>`;\r\n return html;\r\n }).join('');\r\n document.getElementById('recrm-modal').classList.add('open');\r\n },\r\n\r\n closeModal() {\r\n document.getElementById('recrm-modal').classList.remove('open');\r\n this.editingId = null;\r\n },\r\n\r\n async handleFormSubmit(e) {\r\n e.preventDefault();\r\n const form = document.getElementById('recrm-form');\r\n const data = {};\r\n new FormData(form).forEach((val, key) => { data[key] = val; });\r\n if (this.editingId) data.id = this.editingId;\r\n const btn = document.getElementById('recrm-form-submit');\r\n btn.classList.add('recrm-saving');\r\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Saving...';\r\n try {\r\n const action = this.editingId ? 'update' : 'create';\r\n const result = await this.api('POST', {sheet:this.sheet, action}, data);\r\n if (!result.success) throw new Error(result.error || 'Failed to save');\r\n this.showToast(result.message || 'Saved successfully', 'success');\r\n this.closeModal();\r\n this.loadSection(this.sheet);\r\n } catch(e) {\r\n this.showToast('Error: ' + e.message, 'error');\r\n }\r\n btn.classList.remove('recrm-saving');\r\n btn.innerHTML = '<i class=\"fas fa-save\"><\/i> ' + (this.editingId ? 'Update' : 'Save');\r\n return false;\r\n },\r\n\r\n async editRecord(section, id) {\r\n try {\r\n const result = await this.api('GET', {sheet:section, action:'read', id});\r\n if (!result.success || !result.data) throw new Error('Record not found');\r\n this.showForm(section, result.data);\r\n } catch(e) {\r\n this.showToast('Error loading record: ' + e.message, 'error');\r\n }\r\n },\r\n\r\n async deleteRecord(section, id) {\r\n if (!confirm('Are you sure you want to delete this record? This cannot be undone.')) return;\r\n try {\r\n const result = await this.api('POST', {sheet:section, action:'delete'}, {id});\r\n if (!result.success) throw new Error(result.error || 'Failed to delete');\r\n this.showToast(result.message || 'Deleted successfully', 'success');\r\n this.loadSection(section);\r\n } catch(e) {\r\n this.showToast('Error: ' + e.message, 'error');\r\n }\r\n },\r\n\r\n showToast(msg, type = 'info') {\r\n const container = document.getElementById('recrm-toast');\r\n const toast = document.createElement('div');\r\n toast.className = `recrm-toast recrm-toast-${type}`;\r\n const icons = {success:'check-circle',error:'times-circle',warning:'exclamation-triangle',info:'info-circle'};\r\n toast.innerHTML = `<i class=\"fas fa-${icons[type]||icons.info}\"><\/i> ${msg}`;\r\n container.appendChild(toast);\r\n setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity .3s'; setTimeout(() => toast.remove(), 300); }, 3000);\r\n },\r\n\r\n connect() {\r\n const url = document.getElementById('recrm-api-url').value.trim();\r\n if (!url) { this.showToast('Please enter the API URL', 'warning'); return; }\r\n if (!url.startsWith('http')) { this.showToast('Please enter a valid URL', 'warning'); return; }\r\n localStorage.setItem('recrm_api_url', url);\r\n this.apiUrl = url;\r\n this.showToast('Connected successfully!', 'success');\r\n document.getElementById('recrm-setup').style.display = 'none';\r\n document.getElementById('recrm-content').style.display = 'block';\r\n this.navigate('dashboard');\r\n },\r\n\r\n showSetupHelp() {\r\n document.getElementById('recrm-setup-help').style.display = 'flex';\r\n },\r\n\r\n renderSettings() {\r\n const el = document.getElementById('section-settings');\r\n el.innerHTML = `\r\n <div style=\"max-width:600px\">\r\n <div class=\"recrm-card\" style=\"margin-bottom:16px\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">API Configuration<\/div>\r\n <div class=\"recrm-form-group\">\r\n <label>Google Apps Script Web App URL<\/label>\r\n <input type=\"url\" id=\"recrm-settings-url\" value=\"${this.apiUrl}\" style=\"width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px\">\r\n <\/div>\r\n <button class=\"recrm-btn recrm-btn-primary\" onclick=\"App.saveSettings()\"><i class=\"fas fa-save\"><\/i> Save<\/button>\r\n <button class=\"recrm-btn recrm-btn-outline\" onclick=\"App.testConnection()\" style=\"margin-left:8px\"><i class=\"fas fa-plug\"><\/i> Test Connection<\/button>\r\n <\/div>\r\n <div class=\"recrm-card\">\r\n <div class=\"recrm-card-label\" style=\"margin-bottom:12px\">Data<\/div>\r\n <p style=\"font-size:13px;color:var(--gray);margin-bottom:12px\">Your data is stored in Google Sheets. The following tabs are used:<\/p>\r\n <ul style=\"font-size:13px;padding-left:20px;line-height:1.8;color:var(--gray)\">\r\n <li><strong>Contacts<\/strong> - Buyers, sellers, agents, vendors<\/li>\r\n <li><strong>Properties<\/strong> - Listings with status, price, details<\/li>\r\n <li><strong>Deals<\/strong> - Pipeline stages from lead to closed<\/li>\r\n <li><strong>Tasks<\/strong> - To-dos with due dates and priorities<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>`;\r\n },\r\n\r\n saveSettings() {\r\n const url = document.getElementById('recrm-settings-url').value.trim();\r\n if (!url) { this.showToast('Please enter a URL', 'warning'); return; }\r\n localStorage.setItem('recrm_api_url', url);\r\n this.apiUrl = url;\r\n this.showToast('Settings saved', 'success');\r\n },\r\n\r\n async testConnection() {\r\n const btn = document.querySelector('#section-settings .recrm-btn-primary');\r\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Testing...';\r\n btn.disabled = true;\r\n try {\r\n const result = await this.api('GET', {sheet:'contacts', action:'read'});\r\n if (result.success) {\r\n this.showToast('Connection successful! Found ' + (result.data||[]).length + ' contacts.', 'success');\r\n } else {\r\n throw new Error(result.error || 'Unknown error');\r\n }\r\n } catch(e) {\r\n this.showToast('Connection failed: ' + e.message, 'error');\r\n }\r\n btn.innerHTML = '<i class=\"fas fa-plug\"><\/i> Test Connection';\r\n btn.disabled = false;\r\n },\r\n\r\n formatNumber(n) {\r\n n = parseFloat(n) || 0;\r\n if (n >= 1000000) return (n\/1000000).toFixed(1) + 'M';\r\n if (n >= 1000) return n.toLocaleString('en-US');\r\n return n.toLocaleString('en-US');\r\n }\r\n};\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => App.init());\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RealEstate CRM RealCRM Dashboard Contacts Properties Deals Tasks Settings Connect Your Google Sheet Enter your Google Apps Script Web App URL to connect the CRM to your Google Sheet. After deploying Code.gs as a web app, paste the URL here. Connect How to set up? Dashboard Add Record × Cancel Save How to Set Up … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/lilodhyanresort.com\/index.php\/liloclint-2026\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\"> “LiloClint 2026”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-9711","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/comments?post=9711"}],"version-history":[{"count":5,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711\/revisions"}],"predecessor-version":[{"id":9717,"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/pages\/9711\/revisions\/9717"}],"wp:attachment":[{"href":"https:\/\/lilodhyanresort.com\/index.php\/wp-json\/wp\/v2\/media?parent=9711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}