integratedhub/routes/landlord/portfolio/index.tsx

// routes/landlord/portfolio/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { getPropertiesByOwner } from "../../../services/propertyService.ts";
import { getLeasesByOwner } from "../../../services/leaseService.ts";
import { getPaymentTransactionsByOwner } from "../../../services/paymentService.ts";
import { Lease, PaymentTransaction, Property } from "../../../db/interfaces.ts";

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

export const handler = define.handlers({
  async GET(ctx) {
    const { user_id } = ctx.state.data;

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

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

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

  const propertyLeaseMap = new Map(
    leases
      .filter((lease) => lease.property_id)
      .map((lease) => [lease.property_id as string, lease]),
  );

  const propertyRevenueMap = new Map<string, number>();
  for (const transaction of transactions || []) {
    const lease = leases.find((item) => item.id === transaction.lease_id);
    if (!lease?.property_id) continue;
    const previous = propertyRevenueMap.get(lease.property_id) || 0;
    propertyRevenueMap.set(
      lease.property_id,
      previous + (transaction.amount || 0),
    );
  }

  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">
                Multi-Property Portfolio
              </h1>
              <p class="mt-1 text-sm text-gray-500">
                Monitor performance across all active properties
              </p>
            </div>
            <div class="flex space-x-3">
              <a
                href="/landlord/dashboard"
                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 Dashboard
              </a>
            </div>
          </div>
        </div>
      </div>

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

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
          {(properties || []).map((property) => {
            const lease = propertyLeaseMap.get(property.id);
            const revenue = propertyRevenueMap.get(property.id) || 0;
            return (
              <div
                key={property.id}
                class="bg-white shadow rounded-lg p-6 flex flex-col gap-4"
              >
                <div class="flex items-start justify-between">
                  <div>
                    <h2 class="text-xl font-semibold text-gray-900">
                      {property.title || property.address_1 || "Property"}
                    </h2>
                    <p class="text-sm text-gray-500">
                      {property.address_1}
                      {property.city ? `, ${property.city}` : ""}
                      {property.state ? `, ${property.state}` : ""}
                    </p>
                  </div>
                  <span
                    class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                      property.rental_status === "available"
                        ? "bg-green-100 text-green-800"
                        : property.rental_status === "occupied"
                        ? "bg-blue-100 text-blue-800"
                        : "bg-gray-100 text-gray-800"
                    }`}
                  >
                    {property.rental_status || "draft"}
                  </span>
                </div>
                <div class="grid grid-cols-2 gap-4 text-sm text-gray-700">
                  <div>
                    <p class="text-xs uppercase tracking-wide text-gray-400">
                      Monthly Rent
                    </p>
                    <p class="text-lg font-semibold text-gray-900">
                      {formatCurrency(property.monthly_rent || 0)}
                    </p>
                  </div>
                  <div>
                    <p class="text-xs uppercase tracking-wide text-gray-400">
                      Lease Status
                    </p>
                    <p class="text-lg font-semibold text-gray-900">
                      {lease?.lease_status || "draft"}
                    </p>
                  </div>
                  <div>
                    <p class="text-xs uppercase tracking-wide text-gray-400">
                      Tenant
                    </p>
                    <p class="text-sm font-medium text-gray-900">
                      {lease?.tenant_id ? "Assigned" : "Vacant"}
                    </p>
                  </div>
                  <div>
                    <p class="text-xs uppercase tracking-wide text-gray-400">
                      Payments Collected
                    </p>
                    <p class="text-lg font-semibold text-emerald-600">
                      {formatCurrency(revenue)}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
});