Web Property Manager<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8;\n }\n .container {\n max-width: 900px;\n }\n <\/style>\n \n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getAuth, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { getFirestore, doc, getDoc, addDoc, updateDoc, onSnapshot, collection, query, where, deleteDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ Global variables provided by the environment\n const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';\n const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');\n const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;\n\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n const auth = getAuth(app);\n\n window.db = db;\n window.auth = auth;\n window.appId = appId;\n window.initialAuthToken = initialAuthToken;\n <\/script>\n<\/head>\n<body class=\"bg-gray-100 p-8\">\n\n <div class=\"container mx-auto bg-white rounded-lg shadow-xl p-8 space-y-8\">\n <h1 class=\"text-3xl font-bold text-center text-gray-800\">Web Property Management System<\/h1>\n\n \n <div id=\"user-info\" class=\"text-center text-sm text-gray-600\">\n Authenticating…\n <\/div>\n\n \n <div class=\"border-b border-gray-200\">\n <nav class=\"-mb-px flex space-x-8 overflow-x-auto\" aria-label=\"Tabs\">\n <button id=\"tab-add-property\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Add Property<\/button>\n <button id=\"tab-add-tenant\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Add Tenant<\/button>\n <button id=\"tab-create-lease\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Create Lease<\/button>\n <button id=\"tab-record-payment\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Record Payment<\/button>\n <button id=\"tab-edit-property\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Edit Property<\/button>\n <button id=\"tab-report\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Reports<\/button>\n <\/nav>\n <\/div>\n\n \n <div id=\"content-container\">\n \n <\/div>\n\n \n <div id=\"message-box\" class=\"mt-4 p-4 rounded-md text-sm transition-opacity duration-300 hidden\"><\/div>\n <\/div>\n\n <script type=\"module\">\n import { signInWithCustomToken, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { doc, getDoc, addDoc, updateDoc, onSnapshot, collection, query, where, deleteDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ Global variables to hold data from Firestore\n let properties = {};\n let tenants = {};\n let leases = {};\n let payments = {};\n let userId = null;\n\n \/\/ Utility Functions\n function showMessage(message, type = 'success') {\n const msgBox = document.getElementById('message-box');\n msgBox.textContent = message;\n msgBox.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');\n if (type === 'success') {\n msgBox.classList.add('bg-green-100', 'text-green-800');\n } else {\n msgBox.classList.add('bg-red-100', 'text-red-800');\n }\n setTimeout(() => msgBox.classList.add('hidden'), 5000);\n }\n \n \/\/ This is the new function to delete a document\n async function deleteDocument(collectionName, docId) {\n try {\n await deleteDoc(doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/${collectionName}`, docId));\n showMessage(`${collectionName.slice(0, -1).charAt(0).toUpperCase() + collectionName.slice(0, -1).slice(1)} deleted successfully!`, 'success');\n } catch (e) {\n console.error(\"Error deleting document: \", e);\n showMessage(`Failed to delete ${collectionName.slice(0, -1)}. Please try again.`, 'error');\n }\n }\n\n \/\/ Data Persistence and Management with Firebase\n \/\/ This function will fetch initial data and subscribe to real-time updates for all collections\n async function loadData() {\n if (!userId) {\n console.error(\"User not authenticated. Cannot load data.\");\n return;\n }\n\n \/\/ Real-time listener for properties\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`), (snapshot) => {\n properties = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n properties[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time property data updated:\", properties);\n \/\/ Re-render the current tab to show updated data\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for tenants\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/tenants`), (snapshot) => {\n tenants = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n tenants[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time tenant data updated:\", tenants);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for leases\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/leases`), (snapshot) => {\n leases = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n leases[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time lease data updated:\", leases);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for payments\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/payments`), (snapshot) => {\n payments = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n payments[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time payments data updated:\", payments);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n }\n\n \/\/ CRUD Operations adapted for Firebase\n async function addProperty(address, rentAmount) {\n if (!address || !rentAmount) {\n showMessage('Address and Rent Amount are required.', 'error');\n return;\n }\n const rent = parseFloat(rentAmount);\n if (isNaN(rent)) {\n showMessage('Invalid rent amount. Please enter a number.', 'error');\n return;\n }\n\n const propertiesRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`);\n const newProperty = {\n address: address,\n rentAmount: rent,\n isOccupied: false,\n leaseId: null\n };\n\n try {\n const docRef = await addDoc(propertiesRef, newProperty);\n showMessage(`Property at ${address} added successfully with ID: ${docRef.id}.`, 'success');\n } catch (e) {\n console.error(\"Error adding document: \", e);\n showMessage('Failed to add property. Please try again.', 'error');\n }\n }\n\n async function editProperty(propId, newAddress, newRent) {\n const propRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n const propSnap = await getDoc(propRef);\n\n if (!propSnap.exists()) {\n showMessage(`Property with ID ${propId} not found.`, 'error');\n return;\n }\n\n const rent = parseFloat(newRent);\n if (isNaN(rent)) {\n showMessage('Invalid rent amount. Please enter a number.', 'error');\n return;\n }\n\n try {\n await updateDoc(propRef, {\n address: newAddress,\n rentAmount: rent\n });\n showMessage(`Property ID ${propId} updated successfully.`, 'success');\n } catch (e) {\n console.error(\"Error updating document: \", e);\n showMessage('Failed to update property. Please try again.', 'error');\n }\n }\n\n async function loadPropertyForEdit(propId) {\n const propRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n const propSnap = await getDoc(propRef);\n\n if (propSnap.exists()) {\n const prop = propSnap.data();\n document.getElementById('edit-prop-address').value = prop.address;\n document.getElementById('edit-prop-rent').value = prop.rentAmount;\n showMessage(`Property ID ${propId} loaded.`, 'success');\n } else {\n showMessage(`Property with ID ${propId} not found.`, 'error');\n }\n }\n\n async function addTenant(name, contact) {\n if (!name || !contact) {\n showMessage('Name and Contact Info are required.', 'error');\n return;\n }\n\n const tenantsRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/tenants`);\n const newTenant = {\n name: name,\n contact: contact\n };\n\n try {\n const docRef = await addDoc(tenantsRef, newTenant);\n showMessage(`Tenant ${name} added successfully with ID: ${docRef.id}.`, 'success');\n } catch (e) {\n console.error(\"Error adding tenant: \", e);\n showMessage('Failed to add tenant. Please try again.', 'error');\n }\n }\n\n async function createLease(propId, tenantId, startDate, endDate) {\n if (!propId || !tenantId || !startDate || !endDate) {\n showMessage('All fields are required.', 'error');\n return;\n }\n\n \/\/ Check if property is already occupied\n const property = properties[propId];\n if (!property) {\n showMessage('Property ID not found.', 'error');\n return;\n }\n if (property.isOccupied) {\n showMessage('This property is already occupied.', 'error');\n return;\n }\n\n const leasesRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/leases`);\n const newLease = {\n propertyId: propId,\n tenantId: tenantId,\n startDate: startDate,\n endDate: endDate\n };\n\n try {\n const leaseDocRef = await addDoc(leasesRef, newLease);\n const propertyDocRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n await updateDoc(propertyDocRef, {\n isOccupied: true,\n leaseId: leaseDocRef.id\n });\n showMessage(`Lease created for property ${propId}.`, 'success');\n } catch (e) {\n console.error(\"Error creating lease: \", e);\n showMessage('Failed to create lease. Please try again.', 'error');\n }\n }\n\n async function recordPayment(leaseId, amount, date) {\n if (!leaseId || !amount || !date) {\n showMessage('All fields are required.', 'error');\n return;\n }\n\n const paymentsRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/payments`);\n const newPayment = {\n leaseId: leaseId,\n amount: parseFloat(amount),\n date: date\n };\n\n try {\n await addDoc(paymentsRef, newPayment);\n showMessage(`Payment of $${amount} recorded for lease ${leaseId}.`, 'success');\n } catch (e) {\n console.error(\"Error recording payment: \", e);\n showMessage('Failed to record payment. Please try again.', 'error');\n }\n }\n \n \/\/ Helper function to dynamically generate select options\n function generateOptions(data, valueKey, textKey) {\n let optionsHtml = '<option value=\"\" disabled selected>Select...<\/option>';\n for (const id in data) {\n optionsHtml += `<option value=\"${data[id][valueKey]}\">${data[id][textKey]} - ID: ${id}<\/option>`;\n }\n return optionsHtml;\n }\n\n \/\/ Generate the report with interconnected data\n function generateReport() {\n let reportHtml = '<h2 class=\"text-xl font-semibold mb-4 text-center\">Property Management Report<\/h2>';\n reportHtml += '<div class=\"space-y-6\">';\n\n reportHtml += '<h3 class=\"text-lg font-medium mb-2\">Properties<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(properties).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No properties added yet.<\/p>';\n } else {\n for (const id in properties) {\n const prop = properties[id];\n const status = prop.isOccupied ? \"Occupied\" : \"Vacant\";\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | ${prop.address} ($${prop.rentAmount.toFixed(2)}) - Status: ${status} <button onclick=\"deleteDocument('properties', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Tenants<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(tenants).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No tenants added yet.<\/p>';\n } else {\n for (const id in tenants) {\n const tenant = tenants[id];\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | ${tenant.name} (${tenant.contact}) <button onclick=\"deleteDocument('tenants', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Leases<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(leases).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No leases created yet.<\/p>';\n } else {\n for (const id in leases) {\n const lease = leases[id];\n const property = properties[lease.propertyId]?.address || 'Unknown Property';\n const tenant = tenants[lease.tenantId]?.name || 'Unknown Tenant';\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | Prop: ${property} | Tenant: ${tenant} | Start: ${lease.startDate} | End: ${lease.endDate} <button onclick=\"deleteDocument('leases', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Payments<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(payments).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No payments recorded yet.<\/p>';\n } else {\n for (const id in payments) {\n const payment = payments[id];\n const lease = leases[payment.leaseId]?.id || 'Unknown Lease';\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | Lease: ${lease} | Amount: $${payment.amount.toFixed(2)} | Date: ${payment.date}<\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<\/div>';\n return reportHtml;\n }\n\n \/\/ UI Logic\n function getTabsHtml() {\n return {\n 'tab-add-property': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Add New Property<\/h3>\n <div class=\"space-y-4\">\n <input id=\"prop-address\" type=\"text\" placeholder=\"Address\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"prop-rent\" type=\"number\" placeholder=\"Rent Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"addProperty(document.getElementById('prop-address').value, document.getElementById('prop-rent').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Add Property<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-add-tenant': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Add New Tenant<\/h3>\n <div class=\"space-y-4\">\n <input id=\"tenant-name\" type=\"text\" placeholder=\"Tenant Name\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"tenant-contact\" type=\"text\" placeholder=\"Contact Info\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"addTenant(document.getElementById('tenant-name').value, document.getElementById('tenant-contact').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Add Tenant<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-create-lease': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Create New Lease<\/h3>\n <div class=\"space-y-4\">\n <select id=\"lease-prop-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(properties, 'id', 'address')}\n <\/select>\n <select id=\"lease-tenant-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(tenants, 'id', 'name')}\n <\/select>\n <input id=\"lease-start-date\" type=\"text\" placeholder=\"Start Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"lease-end-date\" type=\"text\" placeholder=\"End Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"createLease(document.getElementById('lease-prop-id').value, document.getElementById('lease-tenant-id').value, document.getElementById('lease-start-date').value, document.getElementById('lease-end-date').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Create Lease<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-record-payment': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Record Rent Payment<\/h3>\n <div class=\"space-y-4\">\n <select id=\"payment-lease-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(leases, 'id', 'propertyId')}\n <\/select>\n <input id=\"payment-amount\" type=\"number\" placeholder=\"Payment Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"payment-date\" type=\"text\" placeholder=\"Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"recordPayment(document.getElementById('payment-lease-id').value, document.getElementById('payment-amount').value, document.getElementById('payment-date').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Record Payment<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-edit-property': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Edit Existing Property<\/h3>\n <div class=\"space-y-4\">\n <div class=\"flex items-center space-x-2\">\n <input id=\"edit-prop-id\" type=\"text\" placeholder=\"Enter Property ID\" class=\"flex-grow p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"loadPropertyForEdit(document.getElementById('edit-prop-id').value)\" class=\"py-2 px-4 bg-gray-400 text-white rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 transition-colors\">Load<\/button>\n <\/div>\n <input id=\"edit-prop-address\" type=\"text\" placeholder=\"New Address\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"edit-prop-rent\" type=\"number\" placeholder=\"New Rent Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"editProperty(document.getElementById('edit-prop-id').value, document.getElementById('edit-prop-address').value, document.getElementById('edit-prop-rent').value)\" class=\"w-full py-2 px-4 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors\">Save Changes<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-report': `\n <div id=\"report-content\" class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n ${generateReport()}\n <\/div>\n `\n };\n }\n\n function switchTab(tabId) {\n if (!tabId) return;\n\n document.querySelectorAll('.tab-button').forEach(btn => {\n btn.classList.remove('border-blue-500', 'text-blue-600');\n btn.classList.add('border-transparent', 'text-gray-500');\n });\n\n document.getElementById(tabId).classList.remove('border-transparent', 'text-gray-500');\n document.getElementById(tabId).classList.add('border-blue-500', 'text-blue-600');\n\n document.getElementById('content-container').innerHTML = getTabsHtml()[tabId];\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Wait for authentication to be ready before loading data\n window.auth.onAuthStateChanged(async (user) => {\n if (user) {\n userId = user.uid;\n document.getElementById('user-info').textContent = `User ID: ${userId}`;\n window.deleteDocument = deleteDocument; \/\/ Expose to global scope for onclick handlers\n await loadData();\n \/\/ Load the initial tab content only after data is loaded\n switchTab('tab-add-property');\n } else {\n try {\n \/\/ Sign in anonymously if no user is found\n await signInAnonymously(window.auth);\n } catch (error) {\n console.error(\"Anonymous sign-in failed: \", error);\n document.getElementById('user-info').textContent = \"Failed to authenticate. Data persistence will not work.\";\n }\n }\n });\n\n document.querySelectorAll('.tab-button').forEach(button => {\n button.addEventListener('click', () => switchTab(button.id));\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Web Property Manager Web Property Management System Authenticating… Add Property Add Tenant Create Lease Record Payment Edit Property Reports<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-585","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=585"}],"version-history":[{"count":4,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585\/revisions\/675"}],"wp:attachment":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":585,"date":"2025-08-28T19:15:18","date_gmt":"2025-08-28T19:15:18","guid":{"rendered":"https:\/\/newneighborsinc.com\/?page_id=585"},"modified":"2025-10-09T20:54:49","modified_gmt":"2025-10-09T20:54:49","slug":"property-management","status":"publish","type":"page","link":"https:\/\/newneighborsinc.com\/?page_id=585","title":{"rendered":"Property Management1"},"content":{"rendered":"\n\n\n\n \n \n Web Property Manager<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8;\n }\n .container {\n max-width: 900px;\n }\n <\/style>\n \n <script type=\"module\">\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\n import { getAuth, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { getFirestore, doc, getDoc, addDoc, updateDoc, onSnapshot, collection, query, where, deleteDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ Global variables provided by the environment\n const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';\n const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');\n const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;\n\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n const auth = getAuth(app);\n\n window.db = db;\n window.auth = auth;\n window.appId = appId;\n window.initialAuthToken = initialAuthToken;\n <\/script>\n<\/head>\n<body class=\"bg-gray-100 p-8\">\n\n <div class=\"container mx-auto bg-white rounded-lg shadow-xl p-8 space-y-8\">\n <h1 class=\"text-3xl font-bold text-center text-gray-800\">Web Property Management System<\/h1>\n\n \n <div id=\"user-info\" class=\"text-center text-sm text-gray-600\">\n Authenticating…\n <\/div>\n\n \n <div class=\"border-b border-gray-200\">\n <nav class=\"-mb-px flex space-x-8 overflow-x-auto\" aria-label=\"Tabs\">\n <button id=\"tab-add-property\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Add Property<\/button>\n <button id=\"tab-add-tenant\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Add Tenant<\/button>\n <button id=\"tab-create-lease\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Create Lease<\/button>\n <button id=\"tab-record-payment\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Record Payment<\/button>\n <button id=\"tab-edit-property\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Edit Property<\/button>\n <button id=\"tab-report\" class=\"tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none whitespace-nowrap\">Reports<\/button>\n <\/nav>\n <\/div>\n\n \n <div id=\"content-container\">\n \n <\/div>\n\n \n <div id=\"message-box\" class=\"mt-4 p-4 rounded-md text-sm transition-opacity duration-300 hidden\"><\/div>\n <\/div>\n\n <script type=\"module\">\n import { signInWithCustomToken, signInAnonymously } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\n import { doc, getDoc, addDoc, updateDoc, onSnapshot, collection, query, where, deleteDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\n\n \/\/ Global variables to hold data from Firestore\n let properties = {};\n let tenants = {};\n let leases = {};\n let payments = {};\n let userId = null;\n\n \/\/ Utility Functions\n function showMessage(message, type = 'success') {\n const msgBox = document.getElementById('message-box');\n msgBox.textContent = message;\n msgBox.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');\n if (type === 'success') {\n msgBox.classList.add('bg-green-100', 'text-green-800');\n } else {\n msgBox.classList.add('bg-red-100', 'text-red-800');\n }\n setTimeout(() => msgBox.classList.add('hidden'), 5000);\n }\n \n \/\/ This is the new function to delete a document\n async function deleteDocument(collectionName, docId) {\n try {\n await deleteDoc(doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/${collectionName}`, docId));\n showMessage(`${collectionName.slice(0, -1).charAt(0).toUpperCase() + collectionName.slice(0, -1).slice(1)} deleted successfully!`, 'success');\n } catch (e) {\n console.error(\"Error deleting document: \", e);\n showMessage(`Failed to delete ${collectionName.slice(0, -1)}. Please try again.`, 'error');\n }\n }\n\n \/\/ Data Persistence and Management with Firebase\n \/\/ This function will fetch initial data and subscribe to real-time updates for all collections\n async function loadData() {\n if (!userId) {\n console.error(\"User not authenticated. Cannot load data.\");\n return;\n }\n\n \/\/ Real-time listener for properties\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`), (snapshot) => {\n properties = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n properties[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time property data updated:\", properties);\n \/\/ Re-render the current tab to show updated data\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for tenants\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/tenants`), (snapshot) => {\n tenants = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n tenants[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time tenant data updated:\", tenants);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for leases\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/leases`), (snapshot) => {\n leases = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n leases[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time lease data updated:\", leases);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n\n \/\/ Real-time listener for payments\n onSnapshot(collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/payments`), (snapshot) => {\n payments = {};\n snapshot.forEach((doc) => {\n const data = doc.data();\n payments[doc.id] = { id: doc.id, ...data };\n });\n console.log(\"Real-time payments data updated:\", payments);\n switchTab(document.querySelector('.tab-button.border-blue-500')?.id);\n });\n }\n\n \/\/ CRUD Operations adapted for Firebase\n async function addProperty(address, rentAmount) {\n if (!address || !rentAmount) {\n showMessage('Address and Rent Amount are required.', 'error');\n return;\n }\n const rent = parseFloat(rentAmount);\n if (isNaN(rent)) {\n showMessage('Invalid rent amount. Please enter a number.', 'error');\n return;\n }\n\n const propertiesRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`);\n const newProperty = {\n address: address,\n rentAmount: rent,\n isOccupied: false,\n leaseId: null\n };\n\n try {\n const docRef = await addDoc(propertiesRef, newProperty);\n showMessage(`Property at ${address} added successfully with ID: ${docRef.id}.`, 'success');\n } catch (e) {\n console.error(\"Error adding document: \", e);\n showMessage('Failed to add property. Please try again.', 'error');\n }\n }\n\n async function editProperty(propId, newAddress, newRent) {\n const propRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n const propSnap = await getDoc(propRef);\n\n if (!propSnap.exists()) {\n showMessage(`Property with ID ${propId} not found.`, 'error');\n return;\n }\n\n const rent = parseFloat(newRent);\n if (isNaN(rent)) {\n showMessage('Invalid rent amount. Please enter a number.', 'error');\n return;\n }\n\n try {\n await updateDoc(propRef, {\n address: newAddress,\n rentAmount: rent\n });\n showMessage(`Property ID ${propId} updated successfully.`, 'success');\n } catch (e) {\n console.error(\"Error updating document: \", e);\n showMessage('Failed to update property. Please try again.', 'error');\n }\n }\n\n async function loadPropertyForEdit(propId) {\n const propRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n const propSnap = await getDoc(propRef);\n\n if (propSnap.exists()) {\n const prop = propSnap.data();\n document.getElementById('edit-prop-address').value = prop.address;\n document.getElementById('edit-prop-rent').value = prop.rentAmount;\n showMessage(`Property ID ${propId} loaded.`, 'success');\n } else {\n showMessage(`Property with ID ${propId} not found.`, 'error');\n }\n }\n\n async function addTenant(name, contact) {\n if (!name || !contact) {\n showMessage('Name and Contact Info are required.', 'error');\n return;\n }\n\n const tenantsRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/tenants`);\n const newTenant = {\n name: name,\n contact: contact\n };\n\n try {\n const docRef = await addDoc(tenantsRef, newTenant);\n showMessage(`Tenant ${name} added successfully with ID: ${docRef.id}.`, 'success');\n } catch (e) {\n console.error(\"Error adding tenant: \", e);\n showMessage('Failed to add tenant. Please try again.', 'error');\n }\n }\n\n async function createLease(propId, tenantId, startDate, endDate) {\n if (!propId || !tenantId || !startDate || !endDate) {\n showMessage('All fields are required.', 'error');\n return;\n }\n\n \/\/ Check if property is already occupied\n const property = properties[propId];\n if (!property) {\n showMessage('Property ID not found.', 'error');\n return;\n }\n if (property.isOccupied) {\n showMessage('This property is already occupied.', 'error');\n return;\n }\n\n const leasesRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/leases`);\n const newLease = {\n propertyId: propId,\n tenantId: tenantId,\n startDate: startDate,\n endDate: endDate\n };\n\n try {\n const leaseDocRef = await addDoc(leasesRef, newLease);\n const propertyDocRef = doc(window.db, `artifacts\/${window.appId}\/users\/${userId}\/properties`, propId);\n await updateDoc(propertyDocRef, {\n isOccupied: true,\n leaseId: leaseDocRef.id\n });\n showMessage(`Lease created for property ${propId}.`, 'success');\n } catch (e) {\n console.error(\"Error creating lease: \", e);\n showMessage('Failed to create lease. Please try again.', 'error');\n }\n }\n\n async function recordPayment(leaseId, amount, date) {\n if (!leaseId || !amount || !date) {\n showMessage('All fields are required.', 'error');\n return;\n }\n\n const paymentsRef = collection(window.db, `artifacts\/${window.appId}\/users\/${userId}\/payments`);\n const newPayment = {\n leaseId: leaseId,\n amount: parseFloat(amount),\n date: date\n };\n\n try {\n await addDoc(paymentsRef, newPayment);\n showMessage(`Payment of $${amount} recorded for lease ${leaseId}.`, 'success');\n } catch (e) {\n console.error(\"Error recording payment: \", e);\n showMessage('Failed to record payment. Please try again.', 'error');\n }\n }\n \n \/\/ Helper function to dynamically generate select options\n function generateOptions(data, valueKey, textKey) {\n let optionsHtml = '<option value=\"\" disabled selected>Select...<\/option>';\n for (const id in data) {\n optionsHtml += `<option value=\"${data[id][valueKey]}\">${data[id][textKey]} - ID: ${id}<\/option>`;\n }\n return optionsHtml;\n }\n\n \/\/ Generate the report with interconnected data\n function generateReport() {\n let reportHtml = '<h2 class=\"text-xl font-semibold mb-4 text-center\">Property Management Report<\/h2>';\n reportHtml += '<div class=\"space-y-6\">';\n\n reportHtml += '<h3 class=\"text-lg font-medium mb-2\">Properties<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(properties).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No properties added yet.<\/p>';\n } else {\n for (const id in properties) {\n const prop = properties[id];\n const status = prop.isOccupied ? \"Occupied\" : \"Vacant\";\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | ${prop.address} ($${prop.rentAmount.toFixed(2)}) - Status: ${status} <button onclick=\"deleteDocument('properties', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Tenants<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(tenants).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No tenants added yet.<\/p>';\n } else {\n for (const id in tenants) {\n const tenant = tenants[id];\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | ${tenant.name} (${tenant.contact}) <button onclick=\"deleteDocument('tenants', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Leases<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(leases).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No leases created yet.<\/p>';\n } else {\n for (const id in leases) {\n const lease = leases[id];\n const property = properties[lease.propertyId]?.address || 'Unknown Property';\n const tenant = tenants[lease.tenantId]?.name || 'Unknown Tenant';\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | Prop: ${property} | Tenant: ${tenant} | Start: ${lease.startDate} | End: ${lease.endDate} <button onclick=\"deleteDocument('leases', '${id}')\" class=\"ml-2 px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600\">Delete<\/button><\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<h3 class=\"text-lg font-medium mt-6 mb-2\">Payments<\/h3>';\n reportHtml += '<ul class=\"list-disc list-inside space-y-2\">';\n if (Object.keys(payments).length === 0) {\n reportHtml += '<p class=\"text-gray-500\">No payments recorded yet.<\/p>';\n } else {\n for (const id in payments) {\n const payment = payments[id];\n const lease = leases[payment.leaseId]?.id || 'Unknown Lease';\n reportHtml += `<li class=\"border-b pb-2\"><strong>ID: ${id}<\/strong> | Lease: ${lease} | Amount: $${payment.amount.toFixed(2)} | Date: ${payment.date}<\/li>`;\n }\n }\n reportHtml += '<\/ul>';\n\n reportHtml += '<\/div>';\n return reportHtml;\n }\n\n \/\/ UI Logic\n function getTabsHtml() {\n return {\n 'tab-add-property': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Add New Property<\/h3>\n <div class=\"space-y-4\">\n <input id=\"prop-address\" type=\"text\" placeholder=\"Address\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"prop-rent\" type=\"number\" placeholder=\"Rent Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"addProperty(document.getElementById('prop-address').value, document.getElementById('prop-rent').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Add Property<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-add-tenant': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Add New Tenant<\/h3>\n <div class=\"space-y-4\">\n <input id=\"tenant-name\" type=\"text\" placeholder=\"Tenant Name\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"tenant-contact\" type=\"text\" placeholder=\"Contact Info\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"addTenant(document.getElementById('tenant-name').value, document.getElementById('tenant-contact').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Add Tenant<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-create-lease': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Create New Lease<\/h3>\n <div class=\"space-y-4\">\n <select id=\"lease-prop-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(properties, 'id', 'address')}\n <\/select>\n <select id=\"lease-tenant-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(tenants, 'id', 'name')}\n <\/select>\n <input id=\"lease-start-date\" type=\"text\" placeholder=\"Start Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"lease-end-date\" type=\"text\" placeholder=\"End Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"createLease(document.getElementById('lease-prop-id').value, document.getElementById('lease-tenant-id').value, document.getElementById('lease-start-date').value, document.getElementById('lease-end-date').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Create Lease<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-record-payment': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Record Rent Payment<\/h3>\n <div class=\"space-y-4\">\n <select id=\"payment-lease-id\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n ${generateOptions(leases, 'id', 'propertyId')}\n <\/select>\n <input id=\"payment-amount\" type=\"number\" placeholder=\"Payment Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"payment-date\" type=\"text\" placeholder=\"Date (YYYY-MM-DD)\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"recordPayment(document.getElementById('payment-lease-id').value, document.getElementById('payment-amount').value, document.getElementById('payment-date').value)\" class=\"w-full py-2 px-4 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors\">Record Payment<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-edit-property': `\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-lg font-semibold mb-4\">Edit Existing Property<\/h3>\n <div class=\"space-y-4\">\n <div class=\"flex items-center space-x-2\">\n <input id=\"edit-prop-id\" type=\"text\" placeholder=\"Enter Property ID\" class=\"flex-grow p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"loadPropertyForEdit(document.getElementById('edit-prop-id').value)\" class=\"py-2 px-4 bg-gray-400 text-white rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 transition-colors\">Load<\/button>\n <\/div>\n <input id=\"edit-prop-address\" type=\"text\" placeholder=\"New Address\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <input id=\"edit-prop-rent\" type=\"number\" placeholder=\"New Rent Amount\" class=\"w-full p-2 border rounded-md focus:ring focus:ring-blue-200\">\n <button onclick=\"editProperty(document.getElementById('edit-prop-id').value, document.getElementById('edit-prop-address').value, document.getElementById('edit-prop-rent').value)\" class=\"w-full py-2 px-4 bg-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors\">Save Changes<\/button>\n <\/div>\n <\/div>\n `,\n 'tab-report': `\n <div id=\"report-content\" class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n ${generateReport()}\n <\/div>\n `\n };\n }\n\n function switchTab(tabId) {\n if (!tabId) return;\n\n document.querySelectorAll('.tab-button').forEach(btn => {\n btn.classList.remove('border-blue-500', 'text-blue-600');\n btn.classList.add('border-transparent', 'text-gray-500');\n });\n\n document.getElementById(tabId).classList.remove('border-transparent', 'text-gray-500');\n document.getElementById(tabId).classList.add('border-blue-500', 'text-blue-600');\n\n document.getElementById('content-container').innerHTML = getTabsHtml()[tabId];\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Wait for authentication to be ready before loading data\n window.auth.onAuthStateChanged(async (user) => {\n if (user) {\n userId = user.uid;\n document.getElementById('user-info').textContent = `User ID: ${userId}`;\n window.deleteDocument = deleteDocument; \/\/ Expose to global scope for onclick handlers\n await loadData();\n \/\/ Load the initial tab content only after data is loaded\n switchTab('tab-add-property');\n } else {\n try {\n \/\/ Sign in anonymously if no user is found\n await signInAnonymously(window.auth);\n } catch (error) {\n console.error(\"Anonymous sign-in failed: \", error);\n document.getElementById('user-info').textContent = \"Failed to authenticate. Data persistence will not work.\";\n }\n }\n });\n\n document.querySelectorAll('.tab-button').forEach(button => {\n button.addEventListener('click', () => switchTab(button.id));\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Web Property Manager Web Property Management System Authenticating… Add Property Add Tenant Create Lease Record Payment Edit Property Reports<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-585","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=585"}],"version-history":[{"count":4,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=\/wp\/v2\/pages\/585\/revisions\/675"}],"wp:attachment":[{"href":"https:\/\/newneighborsinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}