Real Estate - Persons Manager

:root { --bg: #f5f7fb; --panel: #ffffff; --accent: #2f80ed; --muted: #6b7280; --danger: #ef4444; --radius: 8px; --shadow: 0 4px 14px rgba(36, 37, 38, 0.06); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } * { box-sizing: border-box; } html,body,#root { height: 100%; } body { margin: 0; background: linear-gradient(180deg, var(--bg), #eef2f7); color: #111827; } .app { display: flex; height: 100vh; gap: 16px; padding: 16px; } .sidebar { width: 220px; background: var(--panel); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; } .brand { margin: 0 0 12px 0; font-size: 18px; color: var(--accent); } .nav-btn { display: block; width: 100%; padding: 10px 12px; border: none; text-align: left; background: transparent; border-radius: 6px; cursor: pointer; color: #111827; margin-bottom: 6px; } .nav-btn.active { background: rgba(47,128,237,0.1); color: var(--accent); font-weight: 600; } .sidebar-bottom { font-size: 12px; color: var(--muted); } .main { flex: 1; display: flex; flex-direction: column; } .topbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; } .search-wrap input { padding: 10px 12px; border-radius: 8px; border: 1px solid #e6e9ef; min-width: 320px; } .actions { display: flex; gap: 8px; align-items: center; } button { padding: 8px 12px; border-radius: 8px; border: 1px solid #e6e9ef; background: white; cursor: pointer; } button.primary { background: var(--accent); color: white; border-color: rgba(0,0,0,0.04); } .panel-container { flex: 1; background: transparent; overflow: auto; padding-right: 4px; } .panel { background: var(--panel); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; } .card { padding: 12px; background: #fff; border-radius: 8px; border: 1px solid #eef2f6; } table { width: 100%; border-collapse: collapse; margin-top: 12px; } th, td { text-align: left; padding: 10px; border-bottom: 1px solid #f1f5f9; font-size: 14px; } .muted { color: var(--muted); font-size: 13px; } .inline-actions button { margin-right: 6px; } /* Modal */ .modal { position: fixed; inset: 0; background: rgba(6, 10, 14, 0.45); display: grid; place-items: center; z-index: 60; } .hidden { display: none; } .modal-inner { width: 680px; max-width: calc(100% - 40px); background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 16px; } .modal header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; } .modal header h2 { margin: 0; } .modal header .close { border:none; background:transparent; font-size:20px; cursor:pointer; } .form-row { display:flex; flex-direction:column; margin-bottom:10px; } .form-row label { font-size:13px; color:var(--muted); margin-bottom:6px; } .form-row input, .form-row select, .form-row textarea { padding:10px; border-radius:6px; border:1px solid #e6e9ef; font-size:14px; } textarea { min-height:80px; resize:vertical; } .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; } @media (max-width: 860px) { .app { flex-direction: column; padding: 10px; } .sidebar { width: 100%; display:flex; flex-direction:row; gap:12px; align-items:center; padding:10px; } .main { margin-top: 8px; } .search-wrap input { min-width: 160px; } } // Data model helpers export function uid(prefix = '') { // simple deterministic unique id (not cryptographically strong) return prefix + Date.now().toString(36) + Math.random().toString(36).substr(2, 5); } export function sampleData() { const properties = [ { id: 'P-001', title: 'Maple Apartments' }, { id: 'P-002', title: 'Riverside Villas' }, { id: 'P-003', title: 'Downtown Office 12B' } ]; const persons = [ { id: 'U-' + 1, name: 'Alice Moreno', email: 'alice@realestate.com', phone: '555-0101', role: 'Agent', assignedProperties: ['P-001'], status: 'Active', notes: 'Top performer Q2' }, { id: 'U-' + 2, name: 'Brandon Cho', email: 'brandon@realestate.com', phone: '555-0202', role: 'Manager', assignedProperties: ['P-002', 'P-003'], status: 'Active', notes: 'Handles commercial listings' }, { id: 'U-' + 3, name: 'Catalina Rivers', email: 'catalina@realestate.com', phone: '555-0303', role: 'Agent', assignedProperties: [], status: 'Inactive', notes: '' } ]; return { properties, persons }; } import { sampleData, uid } from './data-model.js'; const PERSONS_KEY = 're_persons_v1'; const PROPS_KEY = 're_properties_v1'; export function ensureSeed() { const ps = localStorage.getItem(PERSONS_KEY); const pr = localStorage.getItem(PROPS_KEY); if (!ps || !pr) { const seed = sampleData(); localStorage.setItem(PERSONS_KEY, JSON.stringify(seed.persons)); localStorage.setItem(PROPS_KEY, JSON.stringify(seed.properties)); } } export function getPersons() { ensureSeed(); try { return JSON.parse(localStorage.getItem(PERSONS_KEY)) || []; } catch (e) { return []; } } export function savePersons(persons) { localStorage.setItem(PERSONS_KEY, JSON.stringify(persons)); } export function getProperties() { ensureSeed(); try { return JSON.parse(localStorage.getItem(PROPS_KEY)) || []; } catch (e) { return []; } } export function saveProperties(properties) { localStorage.setItem(PROPS_KEY, JSON.stringify(properties)); } export function addPerson(person) { const persons = getPersons(); persons.unshift(person); savePersons(persons); } export function updatePerson(updated) { const persons = getPersons().map(p => (p.id === updated.id ? updated : p)); savePersons(persons); } export function removePerson(id) { const persons = getPersons().filter(p => p.id !== id); savePersons(persons); } // CSV export and import (simple) export function exportPersonsCSV() { const persons = getPersons(); const props = getProperties(); const header = ['id', 'name', 'email', 'phone', 'role', 'assignedProperties', 'status', 'notes']; const rows = persons.map(p => { const assigned = (p.assignedProperties || []).join('|'); // escape quotes const safe = row => `"${(row || '').toString().replace(/"/g, '""')}"`; return [ safe(p.id), safe(p.name), safe(p.email), safe(p.phone), safe(p.role), safe(assigned), safe(p.status), safe(p.notes) ].join(','); }); const csv = [header.join(','), ...rows].join('\n'); return csv; } export function importPersonsCSV(csvText) { const lines = csvText.split(/\r?\n/).filter(Boolean); if (lines.length < 2) return 0; const header = lines[0].split(',').map(h => h.replace(/"/g, '').trim()); const persons = getPersons(); let added = 0; for (let i = 1; i < lines.length; i++) { const raw = lines[i]; const cols = parseCsvLine(raw); if (cols.length < 4) continue; const obj = mapRowToPerson(header, cols); // ensure unique id obj.id = obj.id || uid('U-'); persons.unshift(obj); added++; } savePersons(persons); return added; } function parseCsvLine(line) { // handles quoted fields with commas const res = []; let cur = ''; let inQuotes = false; for (let i = 0; i < line.length; i++) { const ch = line[i]; if (ch === '"' && line[i + 1] === '"') { cur += '"'; i++; continue; } if (ch === '"') { inQuotes = !inQuotes; continue; } if (ch === ',' && !inQuotes) { res.push(cur); cur = ''; continue; } cur += ch; } res.push(cur); return res; } function mapRowToPerson(header, cols) { const obj = {}; for (let j = 0; j < header.length; j++) { const key = header[j]; obj[key] = (cols[j] || '').replace(/(^"|"$)/g, ''); } if (typeof obj.assignedProperties === 'string') { obj.assignedProperties = obj.assignedProperties ? obj.assignedProperties.split('|').map(s => s.trim()) : []; } else { obj.assignedProperties = []; } return obj; } import * as storage from './storage.js'; function qs(sel, ctx = document) { return ctx.querySelector(sel); } function qsa(sel, ctx = document) { return Array.from(ctx.querySelectorAll(sel)); } export function setupUI() { renderPanel('dashboard'); setupNav(); setupTopActions(); setupModal(); renderDashboard(); } function setupNav() { qsa('.nav-btn').forEach(btn => { btn.addEventListener('click', () => { qsa('.nav-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const panel = btn.dataset.panel; renderPanel(panel); }); }); } function setupTopActions() { qs('#btnAddPerson').addEventListener('click', () => openModal()); qs('#btnExport').addEventListener('click', handleExport); qs('#btnImport').addEventListener('click', () => qs('#fileImport').click()); qs('#fileImport').addEventListener('change', handleFileImport); qs('#globalSearch').addEventListener('input', (e) => { const q = e.target.value.trim(); if (currentPanel() === 'persons') renderPersonsTable(q); else renderDashboard(q); }); } function handleExport() { const csv = storage.exportPersonsCSV(); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'persons-export.csv'; a.click(); URL.revokeObjectURL(url); } function handleFileImport(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { const added = storage.importPersonsCSV(reader.result); alert(`Imported ${added} persons`); renderPersonsTable(); }; reader.readAsText(file); e.target.value = ''; } function setupModal() { const modal = qs('#modal'); qs('#modalClose').addEventListener('click', closeModal); qs('#modalCancel').addEventListener('click', closeModal); qs('#personForm').addEventListener('submit', onSubmitPerson); } function onSubmitPerson(e) { e.preventDefault(); const form = e.target; const fd = new FormData(form); const person = { id: fd.get('id') || ('U-' + Date.now()), name: fd.get('name').trim(), email: fd.get('email').trim(), phone: fd.get('phone').trim(), role: fd.get('role'), assignedProperties: fd.get('assignedProperties').split(',').map(s => s.trim()).filter(Boolean), status: fd.get('status'), notes: fd.get('notes').trim() }; if (!person.name || !person.email) { alert('Name and email are required'); return; } const existing = storage.getPersons().find(p => p.id === person.id); if (existing) { storage.updatePerson(person); } else { storage.addPerson(person); } closeModal(); renderPersonsTable(); renderDashboard(); } function openModal(person) { const modal = qs('#modal'); const title = qs('#modalTitle'); const form = qs('#personForm'); form.reset(); if (person) { title.textContent = 'Edit Person'; form.id.value = person.id; form.name.value = person.name || ''; form.email.value = person.email || ''; form.phone.value = person.phone || ''; form.role.value = person.role || 'Agent'; form.assignedProperties.value = (person.assignedProperties || []).join(','); form.status.value = person.status || 'Active'; form.notes.value = person.notes || ''; } else { title.textContent = 'Add Person'; } modal.classList.remove('hidden'); } function closeModal() { qs('#modal').classList.add('hidden'); } function currentPanel() { const active = qs('.nav-btn.active'); return active ? active.dataset.panel : 'dashboard'; } export function renderPanel(panel) { const container = qs('#panelContainer'); container.innerHTML = ''; if (panel === 'dashboard') { const div = document.createElement('div'); div.className = 'panel'; div.innerHTML = `

Dashboard

`; container.appendChild(div); } else if (panel === 'persons') { const div = document.createElement('div'); div.className = 'panel'; div.innerHTML = `

Persons

`; container.appendChild(div); renderPersonsTable(); } else if (panel === 'properties') { const div = document.createElement('div'); div.className = 'panel'; div.innerHTML = `

Properties

`; container.appendChild(div); renderProperties(); } else { const div = document.createElement('div'); div.className = 'panel'; div.innerHTML = `

${panel}

Not implemented yet

`; container.appendChild(div); } } // Dashboard with quick stats and latest few persons export function renderDashboard(query = '') { const el = qs('#dashboardContent'); if (!el) return; const persons = storage.getPersons(); const props = storage.getProperties(); const q = (query || qs('#globalSearch').value || '').toLowerCase(); const filtered = persons.filter(p => { if (!q) return true; return ( (p.name || '').toLowerCase().includes(q) || (p.email || '').toLowerCase().includes(q) || (p.role || '').toLowerCase().includes(q) ); }); el.innerHTML = `

Total Persons

${persons.length}

Active

${persons.filter(p => p.status === 'Active').length}

Properties

${props.length}

Recent Persons

`; const list = qs('#recentList'); const recent = filtered.slice(0, 6); if (recent.length === 0) { list.innerHTML = '

No persons found

'; return; } const ul = document.createElement('div'); ul.style.display = 'grid'; ul.style.gridTemplateColumns = 'repeat(auto-fit, minmax(220px, 1fr))'; ul.style.gap = '8px'; recent.forEach(p => { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = `

${escapeHtml(p.name)}

${escapeHtml(p.role)} • ${escapeHtml(p.status)}

${escapeHtml(p.email)}

Properties: ${(p.assignedProperties || []).join(', ') || '—'}

`; ul.appendChild(card); }); list.appendChild(ul); // delegate edit/delete qsa('[data-edit]', list).forEach(btn => { btn.addEventListener('click', () => { const id = btn.dataset.edit; const p = storage.getPersons().find(x => x.id === id); openModal(p); }); }); qsa('[data-delete]', list).forEach(btn => { btn.addEventListener('click', () => { if (!confirm('Remove person?')) return; const id = btn.dataset.delete; storage.removePerson(id); renderDashboard(); renderPersonsTable(); }); }); } function renderPersonsTable(query = '') { const el = qs('#personsContent'); if (!el) return; const persons = storage.getPersons(); const q = (query || qs('#globalSearch').value || '').toLowerCase(); const filtered = persons.filter(p => { if (!q) return true; return ( (p.name || '').toLowerCase().includes(q) || (p.email || '').toLowerCase().includes(q) || (p.role || '').toLowerCase().includes(q) || (p.id || '').toLowerCase().includes(q) ); }); el.innerHTML = `

Showing ${filtered.length} of ${persons.length}

ID	Name	Email	Role	Properties	Status	Actions

`; const tbody = qs('#personsTableBody'); tbody.innerHTML = filtered.map(p => ` ${escapeHtml(p.id)} ${escapeHtml(p.name)} ${escapeHtml(p.email)} ${escapeHtml(p.role)} ${(p.assignedProperties || []).join(', ') || '—'} ${escapeHtml(p.status)}

`).join(''); // attach handlers qsa('[data-edit]', tbody).forEach(b => { b.addEventListener('click', () => { const id = b.dataset.edit; const p = storage.getPersons().find(x => x.id === id); openModal(p); }); }); qsa('[data-delete]', tbody).forEach(b => { b.addEventListener('click', () => { if (!confirm('Delete person?')) return; const id = b.dataset.delete; storage.removePerson(id); renderPersonsTable(); renderDashboard(); }); }); } function renderProperties() { const el = qs('#propertiesContent'); if (!el) return; const props = storage.getProperties(); el.innerHTML = `

Total: ${props.length}

${props.map(p => ``).join('')}

ID	Title
${escapeHtml(p.id)}	${escapeHtml(p.title)}

`; } function escapeHtml(s = '') { return String(s) .replace(/&/g, '&') .replace(//g, '>'); } import * as storage from './storage.js'; import { setupUI, renderPanel } from './ui.js'; // initialize local storage seed storage.ensureSeed(); // Setup UI and handlers document.addEventListener('DOMContentLoaded', () => { setupUI(); }); { "name": "real-estate-persons-manager", "version": "1.0.0", "description": "Real Estate Department - Persons Manager (Web-based, can be packaged for Windows)", "main": "electron/main.js", "scripts": { "start": "npx serve . -s", "dev": "npx serve . -s", "package:electron": "echo \"Install electron-packager or other packager and package manually\"" }, "keywords": ["real-estate","manager","persons","admin"], "author": "", "license": "MIT" } // Optional Electron main for packaging to Windows. // Install electron and package separately. This file is a minimal entry. const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow () { const win = new BrowserWindow({ width: 1100, height: 750, webPreferences: { nodeIntegration: false, contextIsolation: true } }); win.loadFile(path.join(__dirname, '..', 'index.html')); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); Real Estate Persons Manager (Web) ================================= What this is - A single-page web admin panel to manage persons in a real estate department. - Uses localStorage for persistence (local-only demo). - Features: add/edit/delete persons, search, quick dashboard, CSV export/import. Run locally 1. Install a static server (recommended): npm i -g serve 2. Run: serve . -s 3. Open the served URL in a browser. Package for Windows (optional) - You can package this web app into an Electron app. Install electron and a packager (electron-packager/electron-builder). - The electron/main.js is included as a minimal entry point. Packaging and signing must be done separately. Notes - All data is stored in browser localStorage under keys re_persons_v1 and re_properties_v1. - CSV import expects header columns: id,name,email,phone,role,assignedProperties,status,notes