250 lines
9.2 KiB
TypeScript
250 lines
9.2 KiB
TypeScript
// routes/tenant/payments/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { page } from "fresh";
|
|
import { getPaymentTransactionsByUser } from "../../../services/paymentService.ts";
|
|
import { PaymentTransaction } from "../../../db/interfaces.ts";
|
|
|
|
const LATE_FEE_AMOUNT = 50;
|
|
|
|
function getTransactionDate(transaction: PaymentTransaction): Date {
|
|
const timestamp = transaction.payment_date ?? transaction.created_on ?? 0;
|
|
return new Date(timestamp);
|
|
}
|
|
|
|
function isLatePayment(transaction: PaymentTransaction): boolean {
|
|
const date = getTransactionDate(transaction);
|
|
return date.getUTCDate() > 5;
|
|
}
|
|
|
|
function formatCurrency(value: number): string {
|
|
return `$${value.toLocaleString()}`;
|
|
}
|
|
|
|
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 transactions = await getPaymentTransactionsByUser(user_id);
|
|
|
|
return page({
|
|
transactions,
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading payment history:", error);
|
|
return page({
|
|
error: "Failed to load payment history",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(function TenantPayments({ data }) {
|
|
const { transactions, error } = data as {
|
|
transactions: PaymentTransaction[];
|
|
error?: string;
|
|
};
|
|
|
|
const rows = (transactions || []).map((transaction) => {
|
|
const status = transaction.transaction_status || "pending";
|
|
const lateFee = isLatePayment(transaction) ? LATE_FEE_AMOUNT : 0;
|
|
const lateFeeDue = status !== "completed" ? lateFee : 0;
|
|
|
|
return {
|
|
...transaction,
|
|
status,
|
|
date: getTransactionDate(transaction),
|
|
lateFee,
|
|
lateFeeDue,
|
|
};
|
|
});
|
|
|
|
const totalPaid = rows
|
|
.filter((row) => row.status === "completed")
|
|
.reduce((sum, row) => sum + (row.amount || 0), 0);
|
|
const pendingCount = rows.filter((row) => row.status !== "completed").length;
|
|
const lateFeesDue = rows.reduce((sum, row) => sum + row.lateFeeDue, 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">
|
|
Payment History
|
|
</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
View your past transactions and manage payment methods.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="/tenant/payments/new" // Placeholder for new payment/scheduling
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Make a Payment
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-8">
|
|
{/* Payment Methods Management */}
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
|
|
<div class="px-4 py-5 sm:px-6 flex justify-between items-center">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Payment Methods
|
|
</h3>
|
|
<a
|
|
href="/tenant/payment-methods"
|
|
class="text-sm font-medium text-blue-600 hover:text-blue-500"
|
|
>
|
|
Manage Payment Methods
|
|
</a>
|
|
</div>
|
|
<div class="border-t border-gray-200 px-4 py-5 sm:p-6">
|
|
<p class="text-sm text-gray-500">
|
|
Set up auto-payments, update your card or bank details, and view
|
|
scheduled payments.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3 mb-8">
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Total Paid
|
|
</dt>
|
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">
|
|
{formatCurrency(totalPaid)}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Pending Payments
|
|
</dt>
|
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">
|
|
{pendingCount}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Late Fees Due
|
|
</dt>
|
|
<dd class="mt-1 text-3xl font-semibold text-gray-900">
|
|
{formatCurrency(lateFeesDue)}
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment History Table */}
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Transaction History
|
|
</h3>
|
|
</div>
|
|
<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">
|
|
Date
|
|
</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Method
|
|
</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">
|
|
Receipt
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{rows.length > 0
|
|
? (
|
|
rows.map((transaction) => (
|
|
<tr key={transaction.id}>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{transaction.date.toLocaleDateString()}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{transaction.payment_method || "ach"}
|
|
</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">
|
|
{transaction.stripe_payment_id
|
|
? (
|
|
<a
|
|
href={`/api/receipt/${transaction.stripe_payment_id}`}
|
|
target="_blank"
|
|
class="text-blue-600 hover:text-blue-500"
|
|
>
|
|
View
|
|
</a>
|
|
)
|
|
: "-"}
|
|
</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>
|
|
);
|
|
});
|
|
|