285 lines
10 KiB
TypeScript
285 lines
10 KiB
TypeScript
// routes/landlord/payments/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { page } from "fresh";
|
|
import { getLeasesByOwner } from "../../../services/leaseService.ts";
|
|
import { getPaymentTransactionsByOwner } from "../../../services/paymentService.ts";
|
|
import { getUserById } from "../../../services/userService.ts";
|
|
import { Lease, PaymentTransaction } from "../../../db/interfaces.ts";
|
|
import { getE2ENow, isE2EEnabled } from "../../../services/e2eFixtures.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;
|
|
|
|
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);
|
|
const tenantIds = Array.from(
|
|
new Set(
|
|
leases
|
|
.map((lease) => lease.tenant_id)
|
|
.filter((tenantId): tenantId is string => Boolean(tenantId)),
|
|
),
|
|
);
|
|
const tenantNames: Record<string, string> = {};
|
|
for (const tenantId of tenantIds) {
|
|
const tenant = await getUserById(tenantId);
|
|
if (tenant?.name) {
|
|
tenantNames[tenantId] = tenant.name;
|
|
}
|
|
}
|
|
|
|
return page({
|
|
leases,
|
|
transactions,
|
|
tenantNames,
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading rent collection:", error);
|
|
return page({
|
|
error: "Failed to load rent collection",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(function LandlordPayments({ data }) {
|
|
const { leases, transactions, tenantNames, error } = data as {
|
|
leases: Lease[];
|
|
transactions: PaymentTransaction[];
|
|
tenantNames: Record<string, string>;
|
|
error?: string;
|
|
};
|
|
|
|
const leaseMap = new Map(leases.map((lease) => [lease.id, lease]));
|
|
|
|
const transactionsWithMeta = (transactions || []).map((transaction) => {
|
|
const lease = leaseMap.get(transaction.lease_id || "");
|
|
const tenantName = lease?.tenant_id
|
|
? tenantNames[lease.tenant_id] || "Tenant"
|
|
: "Tenant";
|
|
const status = transaction.transaction_status || "pending";
|
|
const lateFee = isLatePayment(transaction) ? LATE_FEE_AMOUNT : 0;
|
|
|
|
return {
|
|
...transaction,
|
|
lease,
|
|
tenantName,
|
|
status,
|
|
lateFee,
|
|
};
|
|
});
|
|
|
|
const now = isE2EEnabled() ? getE2ENow() : Date.now();
|
|
const nowDate = new Date(now);
|
|
const startOfMonth = new Date(
|
|
nowDate.getFullYear(),
|
|
nowDate.getMonth(),
|
|
1,
|
|
).getTime();
|
|
const endOfMonth = new Date(
|
|
nowDate.getFullYear(),
|
|
nowDate.getMonth() + 1,
|
|
0,
|
|
23,
|
|
59,
|
|
59,
|
|
999,
|
|
).getTime();
|
|
|
|
const monthlyTransactions = transactionsWithMeta.filter((transaction) => {
|
|
const timestamp = getTransactionTimestamp(transaction);
|
|
return timestamp >= startOfMonth && timestamp <= endOfMonth;
|
|
});
|
|
|
|
const expectedThisMonth = leases
|
|
.filter((lease) => lease.lease_status === "active")
|
|
.reduce((sum, lease) => sum + (lease.rent || 0), 0);
|
|
const receivedThisMonth = monthlyTransactions
|
|
.filter((transaction) => transaction.status === "completed")
|
|
.reduce((sum, transaction) => sum + (transaction.amount || 0), 0);
|
|
const overdueCount = monthlyTransactions.filter((transaction) =>
|
|
transaction.status !== "completed"
|
|
).length;
|
|
const lateFeesDue = monthlyTransactions
|
|
.filter((transaction) =>
|
|
transaction.status !== "completed"
|
|
)
|
|
.reduce((sum, transaction) => sum + (transaction.lateFee || 0), 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">Rent Collection</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Track rent payments across your portfolio
|
|
</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-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Expected This Month
|
|
</dt>
|
|
<dd class="mt-1 text-2xl font-semibold text-gray-900">
|
|
{formatCurrency(expectedThisMonth)}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Received This Month
|
|
</dt>
|
|
<dd class="mt-1 text-2xl font-semibold text-emerald-600">
|
|
{formatCurrency(receivedThisMonth)}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Overdue Payments
|
|
</dt>
|
|
<dd class="mt-1 text-2xl font-semibold text-amber-600">
|
|
{overdueCount}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="p-5">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Late Fees Due
|
|
</dt>
|
|
<dd class="mt-1 text-2xl font-semibold text-rose-600">
|
|
{formatCurrency(lateFeesDue)}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
Tenant
|
|
</th>
|
|
<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
|
|
</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 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{transactionsWithMeta.length > 0
|
|
? (
|
|
transactionsWithMeta.map((transaction) => (
|
|
<tr key={transaction.id}>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{transaction.tenantName}
|
|
</td>
|
|
<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">
|
|
<span
|
|
class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
transaction.status === "completed"
|
|
? "bg-green-100 text-green-800"
|
|
: transaction.status === "pending"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-red-100 text-red-800"
|
|
}`}
|
|
>
|
|
{transaction.status}
|
|
</span>
|
|
</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 text-gray-900">
|
|
{new Date(getTransactionTimestamp(transaction))
|
|
.toLocaleDateString()}
|
|
</td>
|
|
</tr>
|
|
))
|
|
)
|
|
: (
|
|
<tr>
|
|
<td
|
|
colspan={6}
|
|
class="px-6 py-4 text-center text-sm text-gray-500"
|
|
>
|
|
No payment history yet
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|