Property Management System

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // [Previous code remains unchanged] export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 3; // CSS definition moved inside the server function const css = ` body { font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } h1 { text-align: center; color: #333; } .tab-navigation { display: flex; justify-content: center; margin-bottom: 20px; } .tab-navigation button { margin: 0 10px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } .tab-navigation button:hover { background-color: #45a049; } .property-form, .tenant-form, .lease-form, .payment-form { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; } .property-form input, .property-form select, .tenant-form input, .tenant-form select, .lease-form input, .lease-form select, .payment-form input, .payment-form select { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; } .property-form button, .tenant-form button, .lease-form button, .payment-form button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .property-list, .tenant-list, .lease-list, .payment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; } .property-card, .tenant-card, .lease-card, .payment-card { background-color: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card-actions { display: flex; justify-content: space-between; margin-top: 10px; } .card-actions button { flex: 1; margin: 0 5px; padding: 5px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; } .card-actions button:last-child { background-color: #f44336; } footer { text-align: center; margin-top: 20px; padding: 10px; background-color: #f1f1f1; } footer a { color: #333; text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 10px; } footer a:hover { color: #4CAF50; } `; // [Previous table creation code remains unchanged] // Payment routes if (request.method === 'GET' && new URL(request.url).pathname === '/payments') { const result = await sqlite.execute(`SELECT * FROM ${KEY}_payments_${SCHEMA_VERSION}`); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } if (request.method === 'POST' && new URL(request.url).pathname === '/payments') { const data = await request.json(); await sqlite.execute( `INSERT INTO ${KEY}_payments_${SCHEMA_VERSION} (leaseId, amount, paymentDate, paymentMethod, status) VALUES (?, ?, ?, ?, ?)`, [ data.leaseId, data.amount, data.paymentDate, data.paymentMethod, data.status ] ); return new Response('Payment added', { status: 201 }); } if (request.method === 'PUT' && /^\/payments\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split('/').pop(); const data = await request.json(); await sqlite.execute( `UPDATE ${KEY}_payments_${SCHEMA_VERSION} SET leaseId = ?, amount = ?, paymentDate = ?, paymentMethod = ?, status = ? WHERE id = ?`, [ data.leaseId, data.amount, data.paymentDate, data.paymentMethod, data.status, id ] ); return new Response('Payment updated', { status: 200 }); } if (request.method === 'DELETE' && /^\/payments\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split('/').pop(); await sqlite.execute(`DELETE FROM ${KEY}_payments_${SCHEMA_VERSION} WHERE id = ?`, [id]); return new Response('Payment deleted', { status: 200 }); } // Properties routes if (request.method === 'GET' && new URL(request.url).pathname === '/properties') { const result = await sqlite.execute(`SELECT * FROM ${KEY}_properties_2`); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } // Render the main HTML page return new Response(` Property Management System

`, { headers: { 'Content-Type': 'text/html' } }); } // [Rest of the previous code remains unchanged]

skhomes