Merge branch 'main' into open-swe/11a3ae30-7b0d-4b7e-937c-38d32a878cac

.env.example

@@ -11,3 +11,19 @@ POSTGRES_OPTIONS="postgresql://postgres:9UMrd6hKBho4RhoyP47t@data1.cyberhybridhu
 SANDBOX_MODE="true"
 DISABLE_EXTERNAL_APIS="true"
 LOCAL_DEV_MODE="true"
+
+# Stripe Configuration
+# STRIPE_SECRET_KEY: Secret key for Stripe API (server-side use only)
+# Get this from your Stripe Dashboard: https://dashboard.stripe.com/apikeys
+# Example: sk_test_51AbCdEfGhIjKlMnOpQrStUvWxYz1234567890
+STRIPE_SECRET_KEY=""
+
+# STRIPE_WEBHOOK_SECRET: Secret used to verify Stripe webhook signatures
+# Get this from your Stripe Dashboard: https://dashboard.stripe.com/webhooks
+# Example: whsec_1234567890abcdef1234567890abcdef1234567890abcdef
+STRIPE_WEBHOOK_SECRET=""
+
+# STRIPE_PUBLISHABLE_KEY: Publishable key for Stripe.js (client-side use)
+# Get this from your Stripe Dashboard: https://dashboard.stripe.com/apikeys
+# Example: pk_test_51AbCdEfGhIjKlMnOpQrStUvWxYz1234567890
+STRIPE_PUBLISHABLE_KEY=""

TODO.md

@@ -5,11 +5,6 @@ development plans for the application.
 
 ## High Priority
 
-- **Implement Lease Creation for Landlord Dashboard**: Add a "Create New Lease"
-  button to the landlord dashboard that allows landlords to create leases with
-  basic price information (rent, security deposit). Leases should have two
-  states: 'new' (initial state) and 'signed' (after tenant accepts invite). The
-  tenant field should be optional until a tenant accepts an invitation.
 
 ## Backend & API
 
@@ -28,7 +23,7 @@ development plans for the application.
   - Tenant invitation and management (`islands/LandlordInviteTenant.tsx`)
   - Messaging with tenants (`islands/LandlordMessageThreads.tsx`)
   - Financial tracking and reporting
-  - Lease creation and management (current task)
+
 - **Complete Tenant Dashboard**: Finalize all features under the
   `routes/tenant/` directory. This includes:
   - Viewing lease documents

islands/AddPaymentMethodModal.tsx

@@ -0,0 +1,231 @@
+import { useCallback, useRef, useState } from "preact/hooks";
+import {
+  encryptDataWithStoredPassword,
+  getEncryptionPassword,
+} from "../helpers.ts";
+
+interface AddPaymentMethodModalProps {
+  userId?: string;
+}
+
+export default function AddPaymentMethodModal(
+  { userId }: AddPaymentMethodModalProps,
+) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const encryptedRoutingNumberRef = useRef<HTMLInputElement>(null);
+  const encryptedAccountNumberRef = useRef<HTMLInputElement>(null);
+  const bankNameRef = useRef<HTMLInputElement>(null);
+  const accountTypeRef = useRef<HTMLSelectElement>(null);
+  const routingNumberRef = useRef<HTMLInputElement>(null);
+  const accountNumberRef = useRef<HTMLInputElement>(null);
+  const isDefaultRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Only encrypt on submit, not on every keystroke - prevents V8 overload
+  const handleEncryptData = useCallback(async () => {
+    // Get current values from the form inputs
+    const routingNumber = routingNumberRef.current?.value || "";
+    const accountNumber = accountNumberRef.current?.value || "";
+
+    // Check if encryption is available and encrypt sensitive fields
+    if (userId && (routingNumber || accountNumber)) {
+      const encryptionPassword = getEncryptionPassword(userId);
+
+      if (encryptionPassword) {
+        try {
+          // Encrypt routing number
+          if (routingNumber && encryptedRoutingNumberRef.current) {
+            const encryptedRoutingNumber = await encryptDataWithStoredPassword(
+              userId,
+              routingNumber,
+            );
+            if (encryptedRoutingNumber) {
+              encryptedRoutingNumberRef.current.value = encryptedRoutingNumber;
+            }
+          }
+
+          // Encrypt account number
+          if (accountNumber && encryptedAccountNumberRef.current) {
+            const encryptedAccountNumber = await encryptDataWithStoredPassword(
+              userId,
+              accountNumber,
+            );
+            if (encryptedAccountNumber) {
+              encryptedAccountNumberRef.current.value = encryptedAccountNumber;
+            }
+          }
+        } catch (error) {
+          console.error("Failed to encrypt payment method data:", error);
+        }
+      }
+    }
+  }, [userId]);
+
+  const handleAddClick = async () => {
+    // Validate form
+    const bankName = bankNameRef.current?.value?.trim() || "";
+    const accountType = accountTypeRef.current?.value || "";
+    const routingNumber = routingNumberRef.current?.value?.trim() || "";
+    const accountNumber = accountNumberRef.current?.value?.trim() || "";
+
+    if (!bankName || !accountType || !routingNumber || !accountNumber) {
+      alert("Please fill in all required fields.");
+      return;
+    }
+
+    if (routingNumber.length !== 9) {
+      alert("Routing number must be 9 digits.");
+      return;
+    }
+
+    if (accountNumber.length < 4) {
+      alert("Account number must be at least 4 digits.");
+      return;
+    }
+
+    setLoading(true);
+    // Encrypt data before submission
+    await handleEncryptData();
+
+    // Clear plaintext fields if encryption was successful
+    if (userId && (routingNumber || accountNumber)) {
+      const encryptionPassword = getEncryptionPassword(userId);
+
+      if (encryptionPassword) {
+        if (routingNumberRef.current) routingNumberRef.current.value = "";
+        if (accountNumberRef.current) accountNumberRef.current.value = "";
+      }
+    }
+
+    // Submit the form
+    setTimeout(() => {
+      if (formRef.current) {
+        formRef.current.submit();
+      }
+    }, 100);
+  };
+
+  return (
+    <div class="bg-white rounded-lg p-8 shadow-lg max-w-md w-full">
+      <h3 class="text-xl font-bold mb-4">Add Payment Method</h3>
+      <form
+        ref={formRef}
+        method="POST"
+        action="/api/create/payment_method"
+        class="flex flex-col gap-4"
+      >
+        <input
+          type="hidden"
+          name="sender"
+          value="/tenant/payment-methods"
+        />
+        <input
+          ref={encryptedRoutingNumberRef}
+          type="hidden"
+          name="routing_number_encrypted"
+          value=""
+        />
+        <input
+          ref={encryptedAccountNumberRef}
+          type="hidden"
+          name="account_number_encrypted"
+          value=""
+        />
+
+        <div class="flex flex-col gap-1">
+          <label for="bank_name" class="text-sm font-medium text-gray-700">
+            Bank Name
+          </label>
+          <input
+            ref={bankNameRef}
+            class="border rounded px-3 py-2"
+            placeholder="e.g., Chase Bank"
+            name="bank_name"
+            required
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="account_type" class="text-sm font-medium text-gray-700">
+            Account Type
+          </label>
+          <select
+            ref={accountTypeRef}
+            class="w-full border p-2 rounded"
+            name="account_type"
+            required
+          >
+            <option value="">Select account type</option>
+            <option value="checking">Checking</option>
+            <option value="savings">Savings</option>
+          </select>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="routing_number" class="text-sm font-medium text-gray-700">
+            Routing Number
+          </label>
+          <input
+            ref={routingNumberRef}
+            class="border rounded px-3 py-2"
+            placeholder="9-digit routing number"
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]{9}"
+            maxLength={9}
+            name="routing_number"
+            required
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="account_number" class="text-sm font-medium text-gray-700">
+            Account Number
+          </label>
+          <input
+            ref={accountNumberRef}
+            class="border rounded px-3 py-2"
+            placeholder="Account number"
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]+"
+            minLength={4}
+            name="account_number"
+            required
+          />
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input
+            ref={isDefaultRef}
+            id="is_default"
+            name="is_default"
+            type="checkbox"
+            value="true"
+            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+          />
+          <label for="is_default" class="text-sm text-gray-700">
+            Set as default payment method
+          </label>
+        </div>
+      </form>
+
+      <div class="flex gap-2 justify-end mt-4">
+        <a
+          href="/tenant/payment-methods"
+          class="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400 text-center inline-block"
+        >
+          Cancel
+        </a>
+        <button
+          type="button"
+          onClick={handleAddClick}
+          class="px-4 py-2 rounded bg-green-600 text-white hover:bg-green-700"
+          disabled={loading}
+        >
+          {loading ? "Adding..." : "Add"}
+        </button>
+      </div>
+    </div>
+  );
+}

islands/PaymentMethodsList.tsx

@@ -0,0 +1,302 @@
+// islands/PaymentMethodsList.tsx
+import { PaymentMethod } from "../services/paymentService.ts";
+import { useEffect, useState } from "preact/hooks";
+import { PopAddPaymentMethodDialog } from "./dialogs/PopAddPaymentMethodDialog.tsx";
+import {
+  decryptDataWithStoredPassword,
+  getEncryptionPassword,
+} from "../helpers.ts";
+
+interface Props {
+  paymentMethods: PaymentMethod[];
+  userId?: string;
+  openModal?: boolean;
+}
+
+interface ProcessedPaymentMethod extends PaymentMethod {
+  maskedAccountNumber?: string;
+  maskedRoutingNumber?: string;
+}
+
+export default function PaymentMethodsList(
+  { paymentMethods, userId, openModal = false }: Props,
+) {
+  const [_popAddPaymentMethod, popupAddPaymentMethodDialog] =
+    PopAddPaymentMethodDialog({
+      userId,
+      defaultOpen: openModal,
+    });
+  const [processedMethods, setProcessedMethods] = useState<
+    ProcessedPaymentMethod[]
+  >([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [_isOpeningModal, _setIsOpeningModal] = useState(openModal);
+
+  // Process payment methods on component mount and when paymentMethods or userId change
+  useEffect(() => {
+    setTimeout(() => {
+      const lockRoute = localStorage.getItem("lock-route");
+      const url = new URL(globalThis.location.href);
+      const currentRoute = url.pathname + url.search;
+
+      if (lockRoute && lockRoute === currentRoute) {
+        localStorage.removeItem("lock-route");
+      }
+    }, 100);
+
+    if (!userId) {
+      setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
+      return;
+    }
+
+    const processMethods = async () => {
+      setIsProcessing(true);
+      const encryptionPassword = getEncryptionPassword(userId);
+
+      if (!encryptionPassword) {
+        // No encryption key available, use methods as-is
+        setProcessedMethods(paymentMethods as ProcessedPaymentMethod[]);
+        setIsProcessing(false);
+        return;
+      }
+
+      const updatedMethods: ProcessedPaymentMethod[] = [];
+
+      for (const method of paymentMethods) {
+        const processedMethod: ProcessedPaymentMethod = { ...method };
+
+        // Decrypt and mask account number
+        if (method.account_number_encrypted) {
+          try {
+            const decryptedData = await decryptDataWithStoredPassword(
+              userId,
+              method.account_number_encrypted,
+            );
+            if (decryptedData) {
+              const accountNumber = decryptedData;
+              // Show only last 4 digits
+              processedMethod.maskedAccountNumber = "****" +
+                accountNumber.slice(-4);
+            }
+          } catch (error) {
+            console.error("Failed to decrypt account number:", error);
+          }
+        }
+
+        // Decrypt and mask routing number
+        if (method.routing_number_encrypted) {
+          try {
+            const decryptedData = await decryptDataWithStoredPassword(
+              userId,
+              method.routing_number_encrypted,
+            );
+            if (decryptedData) {
+              const routingNumber = decryptedData;
+              // Show only last 4 digits
+              processedMethod.maskedRoutingNumber = "****" +
+                routingNumber.slice(-4);
+            }
+          } catch (error) {
+            console.error("Failed to decrypt routing number:", error);
+          }
+        }
+
+        updatedMethods.push(processedMethod);
+      }
+
+      setProcessedMethods(updatedMethods);
+      setIsProcessing(false);
+    };
+
+    processMethods();
+  }, [paymentMethods, userId]);
+
+  const handleSetDefault = async (methodId: string) => {
+    try {
+      const response = await fetch("/api/update/payment_method", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: methodId, is_default: true }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Refresh the page to show updated default
+        globalThis.location.reload();
+      } else {
+        console.error("Failed to set default payment method:", data.error);
+        alert("Failed to set default payment method");
+      }
+    } catch (error) {
+      console.error("Error setting default payment method:", error);
+      alert("Failed to set default payment method");
+    }
+  };
+
+  if (isProcessing) {
+    return (
+      <div class="flex items-center justify-center py-12">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {popupAddPaymentMethodDialog}
+
+      <div class="space-y-4">
+        {processedMethods.length === 0
+          ? (
+            <div class="text-center py-12 bg-white rounded-lg shadow">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-16 w-16 mx-auto text-gray-400 mb-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+                />
+              </svg>
+              <h3 class="text-lg font-medium text-gray-900 mb-2">
+                No payment methods
+              </h3>
+              <p class="text-gray-500 mb-6">
+                Add a payment method to get started with rent payments.
+              </p>
+              <button
+                type="button"
+                onClick={() => _setIsOpeningModal(true)}
+                class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors"
+              >
+                Add Payment Method
+              </button>
+            </div>
+          )
+          : (
+            <>
+              <ul class="space-y-4">
+                {processedMethods.map((method) => (
+                  <li
+                    key={method.id}
+                    class="bg-white rounded-lg shadow p-6 relative"
+                  >
+                    <div class="flex items-start justify-between">
+                      <div class="flex-1">
+                        <div class="flex items-center gap-2 mb-2">
+                          <h3 class="text-lg font-semibold text-gray-900">
+                            {method.bank_name || "Bank Account"}
+                          </h3>
+                          {method.is_default && (
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                              Default
+                            </span>
+                          )}
+                        </div>
+                        <div class="space-y-1 text-sm text-gray-600">
+                          <div>
+                            <span class="font-medium">Type:</span>{" "}
+                            {method.account_type === "checking"
+                              ? "Checking"
+                              : method.account_type === "savings"
+                              ? "Savings"
+                              : method.account_type || "Unknown"}
+                          </div>
+                          <div>
+                            <span class="font-medium">Account:</span>{" "}
+                            {method.maskedAccountNumber || "****"}
+                          </div>
+                          <div>
+                            <span class="font-medium">Routing:</span>{" "}
+                            {method.maskedRoutingNumber || "****"}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div class="flex items-center gap-2 ml-4">
+                        {!method.is_default && (
+                          <button
+                            type="button"
+                            onClick={() => handleSetDefault(method.id!)}
+                            class="text-blue-600 hover:text-blue-700 text-sm font-medium px-3 py-1.5 rounded border border-blue-600 hover:bg-blue-50 transition-colors"
+                          >
+                            Set Default
+                          </button>
+                        )}
+
+                        <form
+                          method="POST"
+                          action="/api/delete/payment_method"
+                          class="inline"
+                        >
+                          <input type="hidden" name="id" value={method.id} />
+                          <input
+                            type="hidden"
+                            name="sender"
+                            value={typeof location !== "undefined"
+                              ? location.pathname
+                              : ""}
+                          />
+                          <button
+                            type="submit"
+                            aria-label="Delete payment method"
+                            class="text-red-600 hover:text-red-700 p-2 rounded hover:bg-red-50 transition-colors"
+                            title="Delete payment method"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              class="h-5 w-5"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                              />
+                            </svg>
+                          </button>
+                        </form>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+
+              <div class="mt-6">
+                <button
+                  type="button"
+                  onClick={() => _setIsOpeningModal(true)}
+                  class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow transition-colors flex items-center justify-center gap-2"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                  Add Payment Method
+                </button>
+              </div>
+            </>
+          )}
+      </div>
+    </>
+  );
+}

islands/TenantSettings.tsx

@@ -185,6 +185,14 @@ export default function TenantSettings({ user }: TenantSettingsProps) {
               checked={paymentPrefs.payment_reminders}
               onChange={() => handlePaymentChange("payment_reminders")}
             />
+            <div class="mt-4">
+              <a
+                href="/tenant/payment-methods"
+                class="text-blue-600 hover:text-blue-500 font-medium"
+              >
+                Manage Payment Methods →
+              </a>
+            </div>
             {/* Auto-pay setup is handled on the Payment Methods page, not here */}
           </div>
         </div>

islands/dialogs/AddPaymentMethodDialog.tsx

@@ -0,0 +1,325 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import {
+  encryptDataWithStoredPassword,
+  getEncryptionPassword,
+} from "../../helpers.ts";
+
+interface AddPaymentMethodDialogProps {
+  onClose: () => void;
+  userId?: string;
+}
+
+type FieldErrorState = {
+  bank_name: boolean;
+  account_type: boolean;
+  routing_number: boolean;
+  account_number: boolean;
+};
+
+export default function AddPaymentMethodDialog(
+  { onClose, userId }: AddPaymentMethodDialogProps,
+) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  const [loading, setLoading] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrorState>({
+    bank_name: false,
+    account_type: false,
+    routing_number: false,
+    account_number: false,
+  });
+
+  useEffect(() => {
+    // Focus first input when dialog opens
+    setTimeout(() => {
+      firstInputRef.current?.focus();
+    }, 100);
+  }, []);
+
+  const clearFieldError = (field: keyof FieldErrorState) => {
+    setFieldErrors((prev) => ({ ...prev, [field]: false }));
+  };
+
+  const getInputErrorClass = (hasError: boolean) => {
+    return hasError ? "border-red-500 focus:border-red-500" : "";
+  };
+
+  const addNewPaymentMethod = async () => {
+    if (!formRef.current) return;
+
+    // Collect form data
+    const formData = new FormData(formRef.current);
+    const bankName = formData.get("bank_name")?.toString().trim() || "";
+    const accountType = formData.get("account_type")?.toString() || "";
+    const routingNumber = formData.get("routing_number")?.toString().trim() ||
+      "";
+    const accountNumber = formData.get("account_number")?.toString().trim() ||
+      "";
+    const isDefault = formData.get("is_default") === "true";
+    const sender = typeof location !== "undefined" ? location.pathname : "/";
+
+    const validation = {
+      bank_name: !bankName,
+      account_type: !accountType,
+      routing_number: !routingNumber || routingNumber.length !== 9,
+      account_number: !accountNumber || accountNumber.length < 4,
+    };
+    setFieldErrors(validation);
+
+    if (
+      validation.bank_name || validation.account_type ||
+      validation.routing_number || validation.account_number
+    ) {
+      return;
+    }
+
+    setLoading(true);
+    localStorage.setItem("lock-route", "/tenant/payment-methods?modal=off");
+
+    // Build submission data
+    const submitData = new FormData();
+    submitData.set("sender", sender);
+    submitData.set("bank_name", bankName);
+    submitData.set("account_type", accountType);
+    submitData.set("is_default", isDefault ? "true" : "false");
+
+    // Encrypt sensitive fields if password is available
+    const encryptionPassword = userId ? getEncryptionPassword(userId) : null;
+
+    if (encryptionPassword && (routingNumber || accountNumber)) {
+      try {
+        // Encrypt routing number
+        const encryptedRoutingNumber = await encryptDataWithStoredPassword(
+          userId!,
+          routingNumber,
+        );
+
+        // Encrypt account number
+        const encryptedAccountNumber = await encryptDataWithStoredPassword(
+          userId!,
+          accountNumber,
+        );
+
+        if (encryptedRoutingNumber && encryptedAccountNumber) {
+          submitData.set("routing_number_encrypted", encryptedRoutingNumber);
+          submitData.set("account_number_encrypted", encryptedAccountNumber);
+          // Send empty plaintext when encrypted
+          submitData.set("routing_number", "");
+          submitData.set("account_number", "");
+        } else {
+          throw new Error("Encryption returned empty result");
+        }
+      } catch (error) {
+        console.error("Encryption failed:", error);
+        alert("Failed to encrypt payment method data. Please try again.");
+        setLoading(false);
+        return;
+      }
+    } else {
+      // No encryption available, send plaintext (not recommended for production)
+      console.warn("No encryption password available, sending plaintext");
+      submitData.set("routing_number", routingNumber);
+      submitData.set("account_number", accountNumber);
+    }
+
+    // Submit the form
+    try {
+      const response = await fetch("/api/create/payment_method", {
+        method: "POST",
+        body: submitData,
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Redirect to payment methods page
+        globalThis.location.href = "/tenant/payment-methods";
+      } else {
+        console.error("Failed to add payment method:", data.error);
+        alert(data.error || "Failed to add payment method. Please try again.");
+        setLoading(false);
+      }
+    } catch (error) {
+      console.error("Error adding payment method:", error);
+      alert("Failed to add payment method. Please try again.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold text-gray-900 mb-4">
+            Add Payment Method
+          </h2>
+
+          <form ref={formRef}>
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="bank_name"
+                class="text-sm font-medium text-gray-700"
+              >
+                Bank Name
+              </label>
+              <input
+                ref={firstInputRef}
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.bank_name)
+                }`}
+                name="bank_name"
+                placeholder="e.g., Chase Bank"
+                type="text"
+                required
+                onInput={() => clearFieldError("bank_name")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.bank_name ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Bank name is required.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="account_type"
+                class="text-sm font-medium text-gray-700"
+              >
+                Account Type
+              </label>
+              <select
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.account_type)
+                }`}
+                name="account_type"
+                required
+                onInput={() => clearFieldError("account_type")}
+              >
+                <option value="">Select account type</option>
+                <option value="checking">Checking</option>
+                <option value="savings">Savings</option>
+              </select>
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.account_type ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Account type is required.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="routing_number"
+                class="text-sm font-medium text-gray-700"
+              >
+                Routing Number
+              </label>
+              <input
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.routing_number)
+                }`}
+                name="routing_number"
+                placeholder="9-digit routing number"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]{9}"
+                maxLength={9}
+                required
+                onInput={() => clearFieldError("routing_number")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.routing_number ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Routing number must be 9 digits.
+              </div>
+            </div>
+
+            <div class="flex flex-col gap-1 my-4">
+              <label
+                for="account_number"
+                class="text-sm font-medium text-gray-700"
+              >
+                Account Number
+              </label>
+              <input
+                class={`w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  getInputErrorClass(fieldErrors.account_number)
+                }`}
+                name="account_number"
+                placeholder="Account number"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]+"
+                minLength={4}
+                required
+                onInput={() => clearFieldError("account_number")}
+              />
+              <div
+                class={`text-red-500 text-xs min-h-4 ${
+                  fieldErrors.account_number ? "visible" : "invisible"
+                }`}
+                aria-live="polite"
+              >
+                Account number is required (min 4 digits).
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2 my-4">
+              <input
+                id="is_default"
+                name="is_default"
+                type="checkbox"
+                value="true"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+              />
+              <label
+                for="is_default"
+                class="text-sm text-gray-700"
+              >
+                Set as default payment method
+              </label>
+            </div>
+          </form>
+
+          <div class="flex justify-end gap-2 mt-6">
+            <button
+              type="button"
+              class={`px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 ${
+                loading ? "opacity-70" : ""
+              }`}
+              onClick={() => {
+                localStorage.setItem(
+                  "lock-route",
+                  "/tenant/payment-methods?modal=off",
+                );
+                setLoading(true);
+                onClose();
+              }}
+              disabled={loading}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 ${
+                loading ? "opacity-70" : ""
+              }`}
+              disabled={loading}
+              onClick={addNewPaymentMethod}
+            >
+              {loading ? "Adding..." : "Add Payment Method"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

islands/dialogs/PopAddPaymentMethodDialog.tsx

@@ -0,0 +1,40 @@
+import { useState } from "preact/hooks";
+import AddPaymentMethodDialog from "./AddPaymentMethodDialog.tsx";
+
+interface PopAddPaymentMethodDialogOptions {
+  userId?: string;
+  defaultOpen?: boolean;
+}
+
+interface PopupController {
+  resolve?: (value: boolean) => void;
+}
+
+export function PopAddPaymentMethodDialog(
+  options: PopAddPaymentMethodDialogOptions = {},
+) {
+  const [popup, setPopup] = useState<PopupController | null>(() => {
+    return options.defaultOpen ? { resolve: () => {} } : null;
+  });
+
+  // Show the popup and return a Promise for the answer
+  const popAddPaymentMethod = (): Promise<boolean> => {
+    return new Promise((resolve) => {
+      setPopup({ resolve });
+    });
+  };
+
+  // Render the popup if needed
+  const popupAddPaymentMethodDialog = popup
+    ? (
+      <AddPaymentMethodDialog
+        onClose={() => {
+          globalThis.location.href = "/tenant/payment-methods?modal=off";
+        }}
+        userId={options.userId}
+      />
+    )
+    : null;
+
+  return [popAddPaymentMethod, popupAddPaymentMethodDialog] as const;
+}

routes/api/payments/cancel_auto_pay.ts

@@ -0,0 +1,79 @@
+// routes/api/payments/cancel_auto_pay.ts
+import { define } from "../../../utils.ts";
+import { cancelAutoPayment } from "../../../services/paymentService.ts";
+import { SessionCookie } from "../../auth/callback.ts";
+
+export const handler = define.handlers({
+  async POST(ctx) {
+    try {
+      const stateData: SessionCookie = ctx.state.data;
+      const user_id = stateData.user_id;
+
+      if (!user_id) {
+        return new Response(
+          JSON.stringify({
+            error: "User not authenticated",
+          }),
+          {
+            status: 401,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      const contentType = ctx.req.headers.get("content-type") || "";
+      let data: Record<string, string> = {};
+
+      // Handle both JSON and form data
+      if (contentType.includes("application/json")) {
+        const jsonData = await ctx.req.json();
+        data = jsonData;
+      } else {
+        const formData = await ctx.req.formData();
+        data = {
+          lease_id: formData.get("lease_id")?.toString() || "",
+        };
+      }
+
+      const lease_id = data.lease_id as string;
+
+      if (!lease_id) {
+        return new Response(
+          JSON.stringify({
+            error: "Lease ID is required",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      const result = await cancelAutoPayment(lease_id, user_id);
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          lease: result[0],
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    } catch (e) {
+      console.error("Error canceling auto payment:", e);
+      return new Response(
+        JSON.stringify({
+          error: e instanceof Error
+            ? e.message
+            : "Failed to cancel auto payment",
+        }),
+        {
+          status: 500,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+  },
+});

routes/api/payments/set_auto_pay.ts

@@ -0,0 +1,92 @@
+// routes/api/payments/set_auto_pay.ts
+import { define } from "../../../utils.ts";
+import { setAutoPayment } from "../../../services/paymentService.ts";
+import { SessionCookie } from "../../auth/callback.ts";
+
+export const handler = define.handlers({
+  async POST(ctx) {
+    try {
+      const stateData: SessionCookie = ctx.state.data;
+      const user_id = stateData.user_id;
+
+      if (!user_id) {
+        return new Response(
+          JSON.stringify({
+            error: "User not authenticated",
+          }),
+          {
+            status: 401,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      const contentType = ctx.req.headers.get("content-type") || "";
+      let data: Record<string, string> = {};
+
+      // Handle both JSON and form data
+      if (contentType.includes("application/json")) {
+        const jsonData = await ctx.req.json();
+        data = jsonData;
+      } else {
+        const formData = await ctx.req.formData();
+        data = {
+          lease_id: formData.get("lease_id")?.toString() || "",
+          payment_method_id: formData.get("payment_method_id")?.toString() ||
+            "",
+        };
+      }
+
+      const lease_id = data.lease_id as string;
+      const payment_method_id = data.payment_method_id as string;
+
+      if (!lease_id) {
+        return new Response(
+          JSON.stringify({
+            error: "Lease ID is required",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      if (!payment_method_id) {
+        return new Response(
+          JSON.stringify({
+            error: "Payment method ID is required",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      const result = await setAutoPayment(lease_id, user_id, payment_method_id);
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          lease: result[0],
+        }),
+        {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    } catch (e) {
+      console.error("Error setting auto payment:", e);
+      return new Response(
+        JSON.stringify({
+          error: e instanceof Error ? e.message : "Failed to set auto payment",
+        }),
+        {
+          status: 500,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+  },
+});

routes/tenant/payment-methods/index.tsx

@@ -0,0 +1,97 @@
+// routes/tenant/payment-methods/index.tsx
+import { define } from "../../../utils.ts";
+import { page } from "fresh";
+import { PaymentMethod } from "../../../services/paymentService.ts";
+import PaymentMethodsList from "../../../islands/PaymentMethodsList.tsx";
+
+interface PaymentMethodsPageData {
+  paymentMethods?: PaymentMethod[];
+  error?: string;
+}
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    const { user_id } = ctx.state.data;
+
+    if (!user_id) {
+      return new Response("", {
+        status: 302,
+        headers: { Location: "/auth/login" },
+      });
+    }
+
+    try {
+      const response = await fetch("/api/retrieve/payment_methods", {
+        headers: {
+          "Cookie": ctx.req.headers.get("Cookie") || "",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!data.success) {
+        console.error("Failed to fetch payment methods:", data.error);
+        return page<PaymentMethodsPageData>({
+          error: "Failed to load payment methods",
+        });
+      }
+
+      return page<PaymentMethodsPageData>({
+        paymentMethods: data.payment_methods || [],
+      });
+    } catch (error) {
+      console.error("Error loading payment methods:", error);
+      return page<PaymentMethodsPageData>({
+        error: "Failed to load payment methods",
+      });
+    }
+  },
+});
+
+export default define.page(function PaymentMethodsPage({
+  data,
+}: {
+  data: PaymentMethodsPageData;
+}) {
+  const { paymentMethods, error } = data as PaymentMethodsPageData;
+
+  if (error) {
+    return (
+      <div class="min-h-screen bg-gray-50 p-8">
+        <div class="max-w-4xl mx-auto">
+          <h1 class="text-3xl font-bold text-red-600 mb-4">Error</h1>
+          <p class="text-gray-700">{error}</p>
+          <div class="mt-6">
+            <a
+              href="/tenant/dashboard"
+              class="text-blue-600 hover:text-blue-500 font-medium"
+            >
+              Go to Dashboard
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="min-h-screen bg-gray-50">
+      <div class="bg-white shadow">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="py-6">
+            <h1 class="text-3xl font-bold text-gray-900">
+              Payment Methods
+            </h1>
+            <p class="mt-1 text-sm text-gray-500">
+              Manage your payment methods for rent payments.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 py-8">
+        <PaymentMethodsList paymentMethods={paymentMethods || []} />
+      </div>
+    </div>
+  );
+});

routes/tenant/payments/index.tsx

@@ -103,7 +103,7 @@ export default define.page(function TenantPayments({ data }) {
               Payment Methods
             </h3>
             <a
-              href="/tenant/settings/payment-methods" // Placeholder for settings route
+              href="/tenant/payment-methods"
               class="text-sm font-medium text-blue-600 hover:text-blue-500"
             >
               Manage Payment Methods

routes/tenant/rent/pay/index.tsx

@@ -1,13 +1,10 @@
 // routes/tenant/rent/pay/index.tsx
 import { define } from "../../../../utils.ts";
-import { SessionCookie } from "../../../auth/callback.ts";
 import { getLeasesByTenant } from "../../../../services/leaseService.ts";
 import {
   getPaymentMethodsByUser,
   PaymentMethod,
 } from "../../../../services/paymentService.ts";
-import { createPaymentTransaction } from "../../../../services/paymentService.ts";
-import { getE2ENow, isE2EEnabled } from "../../../../services/e2eFixtures.ts";
 import { page } from "fresh";
 import { Lease } from "../../../../db/interfaces.ts";
 
@@ -70,24 +67,46 @@ export const handler = define.handlers({
     try {
       const formData = await ctx.req.formData();
       const amount = parseFloat(formData.get("amount") as string);
-      const payment_method_id = formData.get("payment_method_id") as string;
+      const _payment_method_id = formData.get("payment_method_id") as string;
       const lease_id = formData.get("lease_id") as string;
 
-      // TODO: Implement actual payment processing with Stripe or similar
+      // Call the payment intent creation endpoint
-      // For now, simulate successful payment
+      const intentResponse = await fetch("/api/payments/create_intent", {
-      if (isE2EEnabled()) {
+        method: "POST",
-        await createPaymentTransaction(
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
           lease_id,
           amount,
-          getE2ENow(),
+          payment_method: "ach",
-          "ach",
+        }),
-          "completed",
+      });
+
+      const intentData = await intentResponse.json();
+
+      if (!intentData.success) {
+        console.error("Payment intent creation failed:", intentData.error);
+        return page({
+          error: intentData.error ||
+            "Failed to create payment intent. Please try again.",
+        });
+      }
+
+      // Redirect to confirmation page with payment details
+      const redirectUrl = new URL("/tenant/rent/confirmation", ctx.req.url);
+      redirectUrl.searchParams.set("success", "true");
+      redirectUrl.searchParams.set("amount", String(amount));
+
+      if (intentData.mode === "stripe") {
+        redirectUrl.searchParams.set(
+          "payment_intent_id",
+          intentData.payment_intent_id,
         );
+        redirectUrl.searchParams.set("client_secret", intentData.client_secret);
       }
 
       return new Response("", {
         status: 302,
-        headers: { Location: "/tenant/rent/confirmation?success=true" },
+        headers: { Location: redirectUrl.toString() },
       });
     } catch (error) {
       console.error("Error processing payment:", error);