<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SolarBee CRM Portal</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
body{margin:0;font-family:Inter;background:#f5f5f5}
header{background:linear-gradient(135deg,#ffb400,#ff6a00);color:#fff;padding:1rem;text-align:center}
.card{background:#fff;margin:.5rem;border-radius:8px;padding:1rem;box-shadow:0 2px 4px rgba(0,0,0,.1)}
input,select,textarea{width:100%;padding:.75rem;margin:.5rem 0;border:1px solid #ddd;border-radius:6px;font-size:1rem;box-sizing:border-box}
button{background:#ff6a00;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{padding:.3rem;border-bottom:1px solid #ddd;text-align:left}
.login{display:flex;flex-direction:column;gap:1rem;margin:2rem auto;max-width:300px}
.cost-breakdown{font-size:.8rem;opacity:.7}
</style>
</head>
<body>
<header>SolarBee CRM Portal</header>
<!-- 🔐 Simple password gate -->
<div id="gate" class="login">
<h3>Admin Access</h3>
<input id="pwd" type="password" placeholder="Password *" />
<button onclick="checkPwd()">Enter</button>
</div>
<!-- 🔓 Hidden CRM -->
<div id="crm" style="display:none">
<div class="card">
<h3>Calculator Leads</h3>
<table>
<thead>
<tr><th>Name</th><th>Company</th><th>Email</th><th>Monthly Costs</th><th>Savings</th><th>System</th></tr>
</thead>
<tbody id="leadsList"></tbody>
</table>
</div>
<div class="card">
<h3>Add Prospect</h3>
<input id="name" placeholder="Contact name">
<input id="email" placeholder="Email">
<input id="company" placeholder="Company">
<select id="type">
<option>Commercial</option><option>Industrial</option><option>Utility</option>
</select>
<input id="value" placeholder="e.g. 150K">
<select id="priority">
<option>Low</option><option>Medium</option><option>High</option>
</select>
<textarea id="notes" placeholder="Notes" rows="2"></textarea>
<button onclick="addProspect()">Save</button>
</div>
<div class="card">
<h3>CRM Pipeline</h3>
<table>
<thead>
<tr><th>Name</th><th>Company</th><th>Type</th><th>Value</th><th>Priority</th></tr>
</thead>
<tbody id="prospectsList"></tbody>
</table>
</div>
</div>
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
// 🔴 REPLACE THESE TWO LINES 👇
const SUPABASE_URL = 'https://abzzufmnpiitrzhpfrgj.supabase.co';
const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFienp1Zm1ucGlpdHJ6aHBmcmdqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY1MTQxMTksImV4cCI6MjA3MjA5MDExOX0.T6HU4ATs0WR4jmZvoMgy_7tYAW-vuT7o7isWrpy0q3M';
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
window.checkPwd = function() {
if (document.getElementById('pwd').value === 'bee2025') {
document.getElementById('gate').style.display = 'none';
document.getElementById('crm').style.display = 'block';
loadData();
} else alert('Wrong password');
}
async function loadData() {
// Load calculator leads with PNG cost breakdown
const { data: leads } = await supabase.from('calculator_leads').select('*').order('created_at', { ascending: false });
document.getElementById('leadsList').innerHTML = leads.map(l => {
const totalCosts = (l.monthly_electricity_cost || 0) + (l.monthly_diesel_cost || 0);
const costBreakdown = `Grid: ${l.monthly_electricity_cost || 0} + Diesel: ${l.monthly_diesel_cost || 0}`;
return `<tr>
<td>${l.name || 'Anonymous'}</td>
<td>${l.company || 'N/A'}</td>
<td>${l.email || 'N/A'}</td>
<td>PGK ${totalCosts}<br><span class="cost-breakdown">${costBreakdown}</span></td>
<td>PGK ${Math.round(l.calculated_savings || 0)}/yr</td>
<td>${Math.round(l.system_size || 0)} kW</td>
</tr>`;
}).join('');
const { data: prospects } = await supabase.from('prospects').select('*').order('created_at', { ascending: false });
document.getElementById('prospectsList').innerHTML = prospects.map(p =>
`<tr><td>${p.name}</td><td>${p.company}</td><td>${p.type}</td><td>${p.value}</td><td>${p.priority}</td></tr>`
).join('');
}
window.addProspect = async function() {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const company = document.getElementById('company').value.trim();
const type = document.getElementById('type').value;
const value = document.getElementById('value').value;
const priority = document.getElementById('priority').value;
const notes = document.getElementById('notes').value;
if (!name) return alert('Name required');
await supabase.from('prospects').insert({
name, email, company, type, value, priority, notes
});
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('company').value = '';
document.getElementById('value').value = '';
document.getElementById('notes').value = '';
loadData();
}
</script>
</body>
</html>