integratedhub/routes/landlord/reminders/index.tsx

// routes/landlord/reminders/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { getLeasesByOwner } from "../../../services/leaseService.ts";
import { getPaymentTransactionsByOwner } from "../../../services/paymentService.ts";
import { createMessage } from "../../../services/messageService.ts";
import { Lease, PaymentTransaction } from "../../../db/interfaces.ts";

const LATE_FEE_AMOUNT = 50;

function formatCurrency(value: number): string {
  return `$${value.toLocaleString()}`;
}

function getTransactionTimestamp(transaction: PaymentTransaction): number {
  return transaction.payment_date ?? transaction.created_on ?? 0;
}

function isLatePayment(transaction: PaymentTransaction): boolean {
  const date = new Date(getTransactionTimestamp(transaction));
  return date.getUTCDate() > 5;
}

export const handler = define.handlers({
  async GET(ctx) {
    const { user_id } = ctx.state.data;
    const url = new URL(ctx.req.url);
    const success = url.searchParams.get("success") === "true";

    if (!user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    try {
      const leases = await getLeasesByOwner(user_id);
      const transactions = await getPaymentTransactionsByOwner(user_id);

      return page({
        leases,
        transactions,
        success,
      });
    } catch (error) {
      console.error("Error loading reminders:", error);
      return page({
        error: "Failed to load reminders",
      });
    }
  },

  async POST(ctx) {
    const { user_id } = ctx.state.data;

    if (!user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    const formData = await ctx.req.formData();
    const leaseId = (formData.get("lease_id") || "").toString();
    const tenantId = (formData.get("tenant_id") || "").toString();
    const amount = (formData.get("amount") || "").toString();

    if (leaseId && tenantId) {
      await createMessage(
        leaseId,
        user_id,
        tenantId,
        "payment",
        "Payment Reminder",
        `A rent payment of ${amount} is past due. Please submit payment or contact us with questions.`,
      );
    }

    return new Response("", {
      status: 302,
      headers: { Location: "/landlord/reminders?success=true" },
    });
  },
});

export default define.page(function LandlordReminders({ data }) {
  const { leases, transactions, success, error } = data as {
    leases: Lease[];
    transactions: PaymentTransaction[];
    success?: boolean;
    error?: string;
  };

  const leaseMap = new Map(leases.map((lease) => [lease.id, lease]));

  const overdue = (transactions || [])
    .filter((transaction) => transaction.transaction_status !== "completed")
    .map((transaction) => {
      const lease = leaseMap.get(transaction.lease_id || "");
      const lateFee = isLatePayment(transaction) ? LATE_FEE_AMOUNT : 0;
      return {
        ...transaction,
        lease,
        lateFee,
      };
    });

  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="flex justify-between items-center py-6">
            <div>
              <h1 class="text-3xl font-bold text-gray-900">
                Payment Reminders
              </h1>
              <p class="mt-1 text-sm text-gray-500">
                Send reminders to tenants with overdue rent
              </p>
            </div>
            <div class="flex space-x-3">
              <a
                href="/landlord/payments"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                Back to Rent Collection
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {success && (
          <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
            Reminder sent to tenant.
          </div>
        )}

        {error && (
          <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
            {error}
          </div>
        )}

        <div class="bg-white shadow overflow-hidden sm:rounded-md">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Property
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Amount Due
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Late Fee
                </th>
                <th class="px-6 py-3"></th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {overdue.length > 0
                ? (
                  overdue.map((transaction) => (
                    <tr key={transaction.id}>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.lease?.property_address || "Property"}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {formatCurrency(transaction.amount || 0)}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.transaction_status || "pending"}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {transaction.lateFee
                          ? formatCurrency(transaction.lateFee)
                          : "-"}
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {transaction.lease?.tenant_id && (
                          <form method="POST">
                            <input
                              type="hidden"
                              name="lease_id"
                              value={transaction.lease?.id || ""}
                            />
                            <input
                              type="hidden"
                              name="tenant_id"
                              value={transaction.lease?.tenant_id || ""}
                            />
                            <input
                              type="hidden"
                              name="amount"
                              value={formatCurrency(transaction.amount || 0)}
                            />
                            <button
                              type="submit"
                              class="text-blue-600 hover:text-blue-500"
                            >
                              Send Reminder
                            </button>
                          </form>
                        )}
                      </td>
                    </tr>
                  ))
                )
                : (
                  <tr>
                    <td
                      colspan={5}
                      class="px-6 py-4 text-center text-sm text-gray-500"
                    >
                      No overdue payments at the moment.
                    </td>
                  </tr>
                )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
});