760 lines
30 KiB
TypeScript
760 lines
30 KiB
TypeScript
// routes/tenant/dashboard/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { getUserById } from "../../../services/userService.ts";
|
|
import { getLeasesByTenant } from "../../../services/leaseService.ts";
|
|
import { getMessagesByUser } from "../../../services/messageService.ts";
|
|
import { getMaintenanceRequestsByUser } from "../../../services/maintenanceRequestService.ts";
|
|
import { getPaymentTransactionsByUser } from "../../../services/paymentService.ts";
|
|
import { getPropertyById } from "../../../services/propertyService.ts";
|
|
import { getTenantInvitesByEmail } from "../../../services/tenantInviteService.ts";
|
|
import { page } from "fresh";
|
|
import {
|
|
Lease,
|
|
MaintenanceRequest,
|
|
Message,
|
|
PaymentTransaction,
|
|
Property,
|
|
TenantInvite,
|
|
User,
|
|
} from "../../../db/interfaces.ts";
|
|
|
|
type InviteNotice = {
|
|
id: string;
|
|
propertyId?: string | null;
|
|
propertyLabel: string;
|
|
propertyAddress: string;
|
|
inviteUrl: string;
|
|
};
|
|
|
|
function buildPropertyLabel(property: Property | null) {
|
|
return property?.title || property?.address_1 || "Property Invite";
|
|
}
|
|
|
|
function buildPropertyAddress(property: Property | null) {
|
|
if (!property) return "";
|
|
return [
|
|
property.address_1,
|
|
property.address_2,
|
|
property.city,
|
|
property.state,
|
|
property.zip,
|
|
].filter(Boolean).join(", ");
|
|
}
|
|
|
|
async function buildInviteNotices(
|
|
invites: TenantInvite[],
|
|
leases: Lease[],
|
|
) {
|
|
const leasePropertyIds = new Set(
|
|
leases.map((lease) => lease.property_id).filter(Boolean) as string[],
|
|
);
|
|
const pendingInvites = invites.filter((invite) => {
|
|
const propertyId = invite.property_id || "";
|
|
return !propertyId || !leasePropertyIds.has(propertyId);
|
|
});
|
|
const notices = await Promise.all(pendingInvites.map(async (invite) => {
|
|
const property = invite.property_id
|
|
? await getPropertyById(invite.property_id)
|
|
: null;
|
|
return {
|
|
id: invite.id,
|
|
propertyId: invite.property_id,
|
|
propertyLabel: buildPropertyLabel(property),
|
|
propertyAddress: buildPropertyAddress(property),
|
|
inviteUrl: `/tenant/invite/${encodeURIComponent(invite.id)}`,
|
|
};
|
|
}));
|
|
return notices;
|
|
}
|
|
|
|
export const handler = define.handlers({
|
|
async GET(ctx) {
|
|
const { user_id } = ctx.state.data;
|
|
|
|
try {
|
|
const user = await getUserById(user_id);
|
|
const leases = await getLeasesByTenant(user_id);
|
|
const messages = await getMessagesByUser(user_id);
|
|
const maintenanceRequests = await getMaintenanceRequestsByUser(user_id);
|
|
const recentTransactions = await getPaymentTransactionsByUser(user_id);
|
|
const invites = user?.email
|
|
? await getTenantInvitesByEmail(user.email)
|
|
: [];
|
|
const inviteNotices = await buildInviteNotices(invites, leases || []);
|
|
|
|
return page({
|
|
user,
|
|
leases,
|
|
messages,
|
|
maintenanceRequests,
|
|
recentTransactions,
|
|
inviteNotices,
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading tenant dashboard:", error);
|
|
return page({
|
|
error: "Failed to load dashboard data",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(function TenantDashboard({ data }) {
|
|
const {
|
|
user,
|
|
leases,
|
|
messages,
|
|
maintenanceRequests,
|
|
recentTransactions,
|
|
inviteNotices,
|
|
error,
|
|
} = data as {
|
|
user: User;
|
|
leases: Lease[];
|
|
messages: Message[];
|
|
maintenanceRequests: MaintenanceRequest[];
|
|
recentTransactions: PaymentTransaction[];
|
|
inviteNotices?: InviteNotice[];
|
|
error?: string;
|
|
};
|
|
|
|
if (error) {
|
|
return (
|
|
<div class="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-4">Dashboard Error</h1>
|
|
<p class="text-gray-600">{error}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const currentLease = leases?.[0]; // Assuming tenant has one active lease
|
|
const unreadMessageCount = messages?.filter((message) => !message.is_read)
|
|
.length || 0;
|
|
const openRequestCount = maintenanceRequests?.filter((request) =>
|
|
request.status === "open" || request.status === "in_progress"
|
|
).length || 0;
|
|
const inviteCount = inviteNotices?.length || 0;
|
|
const hasInvites = inviteCount > 0;
|
|
const notificationTotal = unreadMessageCount + openRequestCount + inviteCount;
|
|
|
|
return (
|
|
<div class="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<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">Tenant Portal</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Welcome back, {user?.name}!
|
|
</p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<a
|
|
href="/tenant/maintenance/new"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
Request Maintenance
|
|
</a>
|
|
<a
|
|
href="/tenant/messages/new"
|
|
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"
|
|
>
|
|
Contact Landlord
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Notifications */}
|
|
<div class="bg-white shadow rounded-lg mb-8">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Notification Center
|
|
</h3>
|
|
<p class="text-sm text-gray-500">
|
|
Your invites, updates, and action items in one place.
|
|
</p>
|
|
</div>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600">
|
|
{notificationTotal} total notifications
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
|
|
<div
|
|
class={`rounded-lg border p-4 ${
|
|
hasInvites
|
|
? "border-amber-200 bg-amber-50"
|
|
: "border-gray-200 bg-white"
|
|
}`}
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class={`flex h-10 w-10 items-center justify-center rounded-full ${
|
|
hasInvites
|
|
? "bg-amber-100 text-amber-700"
|
|
: "bg-gray-100 text-gray-500"
|
|
} relative`}
|
|
>
|
|
<svg
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M7 8h10M7 12h6m-8 4h12a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v9a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
{hasInvites && (
|
|
<span class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-500 ring-2 ring-amber-50" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">Invites</p>
|
|
<p class="text-xs text-gray-500">
|
|
Pending property invitations
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class={`text-sm font-semibold ${
|
|
hasInvites ? "text-amber-700" : "text-gray-500"
|
|
}`}
|
|
>
|
|
{inviteCount}
|
|
</span>
|
|
</div>
|
|
<div class="mt-3 space-y-3 text-sm text-gray-700">
|
|
{hasInvites
|
|
? (
|
|
inviteNotices?.slice(0, 2).map((invite) => (
|
|
<div
|
|
key={invite.id}
|
|
class="flex items-start justify-between gap-3 rounded-md bg-white/80 p-2"
|
|
>
|
|
<div>
|
|
<p class="font-medium text-gray-900">
|
|
{invite.propertyLabel}
|
|
</p>
|
|
{invite.propertyAddress && (
|
|
<p class="text-xs text-gray-500">
|
|
{invite.propertyAddress}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<a
|
|
href={invite.inviteUrl}
|
|
class="text-xs font-semibold text-amber-700 hover:text-amber-600"
|
|
>
|
|
Review
|
|
</a>
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<p class="text-xs text-gray-500">
|
|
You have no pending invites.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 text-blue-700">
|
|
<svg
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M7 8h10M7 12h4m1 9h3a2 2 0 002-2v-1a4 4 0 00-4-4H9a4 4 0 00-4 4v1a2 2 0 002 2h3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
Messages
|
|
</p>
|
|
<p class="text-xs text-gray-500">
|
|
Unread landlord updates
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm font-semibold text-blue-700">
|
|
{unreadMessageCount}
|
|
</span>
|
|
</div>
|
|
<div class="mt-3">
|
|
<a
|
|
href="/tenant/messages"
|
|
class="text-xs font-semibold text-blue-600 hover:text-blue-500"
|
|
>
|
|
View messages
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
|
|
<svg
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
Maintenance
|
|
</p>
|
|
<p class="text-xs text-gray-500">
|
|
Open or active requests
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm font-semibold text-emerald-700">
|
|
{openRequestCount}
|
|
</span>
|
|
</div>
|
|
<div class="mt-3">
|
|
<a
|
|
href="/tenant/maintenance"
|
|
class="text-xs font-semibold text-emerald-600 hover:text-emerald-500"
|
|
>
|
|
View requests
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Property Overview */}
|
|
{currentLease && (
|
|
<div class="bg-white shadow rounded-lg mb-8">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
|
|
Your Rental Property
|
|
</h3>
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Address</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">
|
|
{currentLease.property_address || "Property Address"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">
|
|
Monthly Rent
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">
|
|
${currentLease.rent?.toLocaleString() || "N/A"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">
|
|
Lease End Date
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">
|
|
{currentLease.end_date
|
|
? new Date(currentLease.end_date).toLocaleDateString()
|
|
: "N/A"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Status</dt>
|
|
<dd class="mt-1">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 capitalize">
|
|
{currentLease.lease_status || "active"}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
|
|
<a
|
|
href="/tenant/rent/pay"
|
|
class="bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow"
|
|
>
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-6 w-6 text-green-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Pay Rent
|
|
</dt>
|
|
<dd class="text-lg font-medium text-gray-900">
|
|
Online Payment
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="/tenant/maintenance"
|
|
class="bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow"
|
|
>
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-6 w-6 text-blue-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Maintenance
|
|
</dt>
|
|
<dd class="text-lg font-medium text-gray-900">
|
|
Request Service
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="/tenant/documents"
|
|
class="bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow"
|
|
>
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-6 w-6 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Documents
|
|
</dt>
|
|
<dd class="text-lg font-medium text-gray-900">
|
|
Lease & Forms
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="/tenant/messages"
|
|
class="bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow"
|
|
>
|
|
<div class="p-5">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-6 w-6 text-yellow-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-5 w-0 flex-1">
|
|
<dl>
|
|
<dt class="text-sm font-medium text-gray-500 truncate">
|
|
Messages
|
|
</dt>
|
|
<dd class="text-lg font-medium text-gray-900">
|
|
{unreadMessageCount} Unread
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
{/* Recent Messages */}
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Recent Messages
|
|
</h3>
|
|
<a
|
|
href="/tenant/messages"
|
|
class="text-sm text-blue-600 hover:text-blue-500"
|
|
>
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="space-y-4">
|
|
{messages && messages.length > 0
|
|
? (
|
|
messages.slice(0, 3).map((message) => (
|
|
<div key={message.id} class="flex items-start space-x-3">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<span class="text-xs font-medium text-blue-700">
|
|
L
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-900">
|
|
Landlord
|
|
</p>
|
|
<p class="text-sm text-gray-500 truncate">
|
|
{message.subject}
|
|
</p>
|
|
<p class="text-xs text-gray-400">
|
|
{new Date(message.created_on as number)
|
|
.toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
{!message.is_read && (
|
|
<div class="flex-shrink-0">
|
|
<div class="w-2 h-2 bg-blue-600 rounded-full"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<div class="text-center py-4">
|
|
<p class="text-sm text-gray-500">No messages yet</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Maintenance Requests */}
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Maintenance Requests
|
|
</h3>
|
|
<a
|
|
href="/tenant/maintenance"
|
|
class="text-sm text-blue-600 hover:text-blue-500"
|
|
>
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="space-y-4">
|
|
{maintenanceRequests && maintenanceRequests.length > 0
|
|
? (
|
|
maintenanceRequests.slice(0, 3).map((request) => (
|
|
<div
|
|
key={request.id}
|
|
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
|
>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{request.request_type}
|
|
</p>
|
|
<p class="text-sm text-gray-500 capitalize">
|
|
Priority: {request.priority}
|
|
</p>
|
|
<p class="text-xs text-gray-400">
|
|
{new Date(request.created_on as number)
|
|
.toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span
|
|
class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
request.status === "open"
|
|
? "bg-red-100 text-red-800"
|
|
: request.status === "in_progress"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-green-100 text-green-800"
|
|
}`}
|
|
>
|
|
{request.status?.replace("_", " ")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<div class="text-center py-4">
|
|
<p class="text-sm text-gray-500">
|
|
No maintenance requests
|
|
</p>
|
|
<a
|
|
href="/tenant/maintenance/new"
|
|
class="text-sm text-blue-600 hover:text-blue-500"
|
|
>
|
|
Submit a request
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Payments */}
|
|
<div class="bg-white shadow rounded-lg lg:col-span-2">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Recent Payments
|
|
</h3>
|
|
<a
|
|
href="/tenant/payments"
|
|
class="text-sm text-blue-600 hover:text-blue-500"
|
|
>
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
<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">
|
|
Description
|
|
</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>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{recentTransactions && recentTransactions.length > 0
|
|
? (
|
|
recentTransactions.map((transaction) => (
|
|
<tr key={transaction.id}>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{new Date(transaction.created_on as number)
|
|
.toLocaleDateString()}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
{transaction.payment_method}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
${transaction.amount?.toLocaleString()}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span
|
|
class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
transaction.transaction_status === "completed"
|
|
? "bg-green-100 text-green-800"
|
|
: transaction.transaction_status ===
|
|
"pending"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-red-100 text-red-800"
|
|
}`}
|
|
>
|
|
{transaction.transaction_status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)
|
|
: (
|
|
<tr>
|
|
<td
|
|
colspan={4}
|
|
class="px-6 py-4 text-center text-sm text-gray-500"
|
|
>
|
|
No payment history yet
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|