731 lines
28 KiB
TypeScript
731 lines
28 KiB
TypeScript
// routes/tenant/dashboard/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { sqlGetUser } from "../../../db/sqlUserRepository.ts";
|
|
import { getUserById } from "../../../services/userService.ts";
|
|
import { getOnboardingStatus } from "../../../services/onboardingService.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[],
|
|
) {
|
|
// Only hide invites for properties where the lease is final (approved/active).
|
|
// Keep the invite visible while the lease is pending (until "Start Lease" → landlord approval).
|
|
const finalLeasePropertyIds = new Set(
|
|
(leases || [])
|
|
.filter(
|
|
(lease) =>
|
|
lease.lease_status === "active" ||
|
|
lease.approval_status === "approved",
|
|
)
|
|
.map((lease) => lease.property_id)
|
|
.filter(Boolean) as string[],
|
|
);
|
|
const pendingInvites = invites.filter((invite) => {
|
|
const propertyId = invite.property_id || "";
|
|
return !propertyId || !finalLeasePropertyIds.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;
|
|
|
|
const onboardingStatus = await getOnboardingStatus(user_id);
|
|
if (!onboardingStatus?.onboarded_tenant) {
|
|
return new Response("", {
|
|
status: 303,
|
|
headers: { Location: "/tenant/onboarding" },
|
|
});
|
|
}
|
|
|
|
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);
|
|
// Invites are looked up by email; KV user may have no email if OAuth didn't provide it at login.
|
|
const emailForInvites = user?.email?.trim() ||
|
|
(await sqlGetUser(user_id))?.email?.trim() ||
|
|
"";
|
|
const invites = emailForInvites
|
|
? await getTenantInvitesByEmail(emailForInvites)
|
|
: [];
|
|
const inviteNotices = await buildInviteNotices(invites, leases || []);
|
|
|
|
// Fetch property data for the current lease
|
|
const currentLease = leases?.[0];
|
|
let currentProperty = null;
|
|
if (currentLease?.property_id) {
|
|
currentProperty = await getPropertyById(currentLease.property_id);
|
|
}
|
|
|
|
return page({
|
|
user,
|
|
leases,
|
|
messages,
|
|
maintenanceRequests,
|
|
recentTransactions,
|
|
inviteNotices,
|
|
currentProperty,
|
|
});
|
|
} 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,
|
|
currentProperty,
|
|
error,
|
|
} = data as {
|
|
user: User;
|
|
leases: Lease[];
|
|
messages: Message[];
|
|
maintenanceRequests: MaintenanceRequest[];
|
|
recentTransactions: PaymentTransaction[];
|
|
inviteNotices?: InviteNotice[];
|
|
currentProperty?: Property | null;
|
|
error?: string;
|
|
};
|
|
|
|
if (error) {
|
|
return (
|
|
<div class="dashboard-error-page tenant-route">
|
|
<div class="dashboard-error-inner">
|
|
<h1 class="dashboard-error-title">Dashboard Error</h1>
|
|
<p class="dashboard-error-text">{error}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const currentLease = leases?.[0]; // Assuming tenant has one active lease
|
|
const unreadMessageCount = messages?.filter(
|
|
(m) => m.recipient_id === user?.id && !m.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="dashboard-page tenant-route">
|
|
{/* Header */}
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-header-inner">
|
|
<div class="dashboard-header-row">
|
|
<div>
|
|
<h1 class="dashboard-header-title">Tenant Portal</h1>
|
|
<p class="dashboard-header-subtitle">
|
|
Welcome back, {user?.name}!
|
|
</p>
|
|
</div>
|
|
<div class="dashboard-header-actions">
|
|
<a
|
|
href="/tenant/maintenance/new"
|
|
class="dashboard-btn dashboard-btn--primary"
|
|
>
|
|
Request Maintenance
|
|
</a>
|
|
<a
|
|
href="/tenant/messages/new"
|
|
class="dashboard-btn dashboard-btn--secondary"
|
|
>
|
|
Contact Landlord
|
|
</a>
|
|
<a
|
|
href="/tenant/messages"
|
|
class={`dashboard-btn ${
|
|
unreadMessageCount > 0
|
|
? "dashboard-btn--messages-new"
|
|
: "dashboard-btn--secondary"
|
|
}`}
|
|
>
|
|
Messages
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-content">
|
|
{/* Notifications */}
|
|
<div class="dashboard-card dashboard-card--no-overflow dashboard-section-mb">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-notification-header">
|
|
<div>
|
|
<h3 class="dashboard-section-title">
|
|
Notification Center
|
|
</h3>
|
|
<p class="dashboard-header-subtitle">
|
|
Your invites, updates, and action items in one place.
|
|
</p>
|
|
</div>
|
|
<span class="dashboard-notification-badge">
|
|
{notificationTotal} total notifications
|
|
</span>
|
|
</div>
|
|
|
|
<div class="dashboard-notification-grid">
|
|
<div
|
|
class={hasInvites
|
|
? "dashboard-notification-card dashboard-notification-card--highlight"
|
|
: "dashboard-notification-card"}
|
|
>
|
|
<div class="dashboard-notification-card-inner">
|
|
<div class="dashboard-notification-icon-wrap">
|
|
<div
|
|
class={hasInvites
|
|
? "dashboard-notification-icon dashboard-notification-icon--highlight"
|
|
: "dashboard-notification-icon"}
|
|
>
|
|
<svg
|
|
class="dashboard-notification-icon-svg"
|
|
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="dashboard-notification-dot"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<p class="dashboard-row-label">Invites</p>
|
|
<p class="dashboard-row-sub">
|
|
Pending property invitations
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class={hasInvites
|
|
? "dashboard-notification-count dashboard-notification-count--highlight"
|
|
: "dashboard-notification-count"}
|
|
>
|
|
{inviteCount}
|
|
</span>
|
|
</div>
|
|
<div class="dashboard-invite-list">
|
|
{hasInvites
|
|
? (
|
|
inviteNotices?.slice(0, 2).map((invite) => (
|
|
<div key={invite.id} class="dashboard-invite-item">
|
|
<div>
|
|
<p class="dashboard-invite-item-label">
|
|
{invite.propertyLabel}
|
|
</p>
|
|
{invite.propertyAddress && (
|
|
<p class="dashboard-invite-item-address">
|
|
{invite.propertyAddress}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<a
|
|
href={invite.inviteUrl}
|
|
class="dashboard-invite-link"
|
|
>
|
|
Review
|
|
</a>
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<p class="dashboard-row-sub">
|
|
You have no pending invites.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-notification-card">
|
|
<div class="dashboard-notification-card-inner">
|
|
<div class="dashboard-notification-icon-wrap">
|
|
<div class="dashboard-notification-icon dashboard-notification-icon--blue">
|
|
<svg
|
|
class="dashboard-notification-icon-svg"
|
|
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="dashboard-row-label">Messages</p>
|
|
<p class="dashboard-row-sub">
|
|
Unread landlord updates
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span class="dashboard-notification-count dashboard-notification-count--blue">
|
|
{unreadMessageCount}
|
|
</span>
|
|
</div>
|
|
<div class="dashboard-notification-footer">
|
|
<a href="/tenant/messages">View messages</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-notification-card">
|
|
<div class="dashboard-notification-card-inner">
|
|
<div class="dashboard-notification-icon-wrap">
|
|
<div class="dashboard-notification-icon dashboard-notification-icon--green">
|
|
<svg
|
|
class="dashboard-notification-icon-svg"
|
|
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="dashboard-row-label">Maintenance</p>
|
|
<p class="dashboard-row-sub">
|
|
Open or active requests
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span class="dashboard-notification-count dashboard-notification-count--green">
|
|
{openRequestCount}
|
|
</span>
|
|
</div>
|
|
<div class="dashboard-notification-footer">
|
|
<a
|
|
href="/tenant/maintenance"
|
|
class="notification-link--green"
|
|
>
|
|
View requests
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Property Overview */}
|
|
{currentLease && (
|
|
<div class="dashboard-card dashboard-section-mb">
|
|
<div class="dashboard-card-body">
|
|
<h3 class="dashboard-section-title dashboard-section-title--mb">
|
|
Your Rental Property
|
|
</h3>
|
|
<div class="dashboard-property-grid">
|
|
<div>
|
|
<dt class="dashboard-stat-label">Address</dt>
|
|
<dd class="dashboard-stat-value">
|
|
{currentProperty
|
|
? buildPropertyAddress(currentProperty) ||
|
|
"Property Address"
|
|
: currentLease.property_address || "Property Address"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="dashboard-stat-label">Monthly Rent</dt>
|
|
<dd class="dashboard-stat-value">
|
|
${currentProperty?.monthly_rent?.toLocaleString() ||
|
|
currentLease.rent?.toLocaleString() ||
|
|
"N/A"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="dashboard-stat-label">Lease End Date</dt>
|
|
<dd class="dashboard-stat-value">
|
|
{currentLease.end_date
|
|
? new Date(currentLease.end_date).toLocaleDateString()
|
|
: "N/A"}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="dashboard-stat-label">Status</dt>
|
|
<dd>
|
|
<span class="dashboard-badge dashboard-badge--green capitalize">
|
|
{currentLease.lease_status || "active"}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div class="dashboard-stats-grid">
|
|
<a href="/tenant/rent/pay" class="dashboard-quick-action">
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-stat-card">
|
|
<div class="dashboard-stat-icon-wrap">
|
|
<svg
|
|
class="dashboard-stat-icon dashboard-stat-icon--green"
|
|
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="dashboard-stat-content">
|
|
<dt class="dashboard-stat-label">Pay Rent</dt>
|
|
<dd class="dashboard-stat-value">Online Payment</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/tenant/maintenance" class="dashboard-quick-action">
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-stat-card">
|
|
<div class="dashboard-stat-icon-wrap">
|
|
<svg
|
|
class="dashboard-stat-icon dashboard-stat-icon--blue"
|
|
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="dashboard-stat-content">
|
|
<dt class="dashboard-stat-label">Maintenance</dt>
|
|
<dd class="dashboard-stat-value">Request Service</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/tenant/documents" class="dashboard-quick-action">
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-stat-card">
|
|
<div class="dashboard-stat-icon-wrap">
|
|
<svg
|
|
class="dashboard-stat-icon dashboard-stat-icon--purple"
|
|
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="dashboard-stat-content">
|
|
<dt class="dashboard-stat-label">Documents</dt>
|
|
<dd class="dashboard-stat-value">Lease & Forms</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/tenant/messages" class="dashboard-quick-action">
|
|
<div class="dashboard-card">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-stat-card">
|
|
<div class="dashboard-stat-icon-wrap">
|
|
<svg
|
|
class="dashboard-stat-icon dashboard-stat-icon--yellow"
|
|
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="dashboard-stat-content">
|
|
<dt class="dashboard-stat-label">Messages</dt>
|
|
<dd class="dashboard-stat-value">
|
|
{unreadMessageCount} Unread
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="dashboard-two-col">
|
|
{/* Recent Messages */}
|
|
<div class="dashboard-card dashboard-card--no-overflow">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-section-header">
|
|
<h3 class="dashboard-section-title">Recent Messages</h3>
|
|
<a href="/tenant/messages" class="dashboard-section-link">
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="dashboard-list-spaced">
|
|
{messages && messages.length > 0
|
|
? (
|
|
messages.slice(0, 3).map((message) => (
|
|
<div key={message.id} class="dashboard-message-row">
|
|
<div class="dashboard-message-avatar">
|
|
<span class="dashboard-message-avatar-text">L</span>
|
|
</div>
|
|
<div class="dashboard-message-body">
|
|
<p class="dashboard-message-from">Landlord</p>
|
|
<p class="dashboard-message-preview">
|
|
{message.subject}
|
|
</p>
|
|
<p class="dashboard-message-meta">
|
|
{new Date(message.created_on as number)
|
|
.toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
{!message.is_read && (
|
|
<div
|
|
class="dashboard-message-dot"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<div class="dashboard-empty">
|
|
<p class="dashboard-empty-text">No messages yet</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Maintenance Requests */}
|
|
<div class="dashboard-card dashboard-card--no-overflow">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-section-header">
|
|
<h3 class="dashboard-section-title">
|
|
Maintenance Requests
|
|
</h3>
|
|
<a href="/tenant/maintenance" class="dashboard-section-link">
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="dashboard-list-spaced">
|
|
{maintenanceRequests && maintenanceRequests.length > 0
|
|
? (
|
|
maintenanceRequests.slice(0, 3).map((request) => (
|
|
<div key={request.id} class="dashboard-row">
|
|
<div>
|
|
<p class="dashboard-row-label">
|
|
{request.request_type}
|
|
</p>
|
|
<p class="dashboard-row-muted capitalize">
|
|
Priority: {request.priority}
|
|
</p>
|
|
<p class="dashboard-row-meta">
|
|
{new Date(request.created_on as number)
|
|
.toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span
|
|
class={request.status === "open"
|
|
? "dashboard-badge dashboard-badge--red-pill"
|
|
: request.status === "in_progress"
|
|
? "dashboard-badge dashboard-badge--yellow"
|
|
: "dashboard-badge dashboard-badge--green"}
|
|
>
|
|
{request.status?.replace("_", " ")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))
|
|
)
|
|
: (
|
|
<div class="dashboard-empty">
|
|
<p class="dashboard-empty-text">
|
|
No maintenance requests
|
|
</p>
|
|
<a
|
|
href="/tenant/maintenance/new"
|
|
class="dashboard-empty-link"
|
|
>
|
|
Submit a request
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent Payments */}
|
|
<div class="dashboard-card dashboard-card--full-width">
|
|
<div class="dashboard-card-body">
|
|
<div class="dashboard-section-header">
|
|
<h3 class="dashboard-section-title">Recent Payments</h3>
|
|
<a href="/tenant/payments" class="dashboard-section-link">
|
|
View all
|
|
</a>
|
|
</div>
|
|
<div class="dashboard-table-wrap">
|
|
<table class="dashboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="dashboard-table-th">Date</th>
|
|
<th class="dashboard-table-th">Description</th>
|
|
<th class="dashboard-table-th">Amount</th>
|
|
<th class="dashboard-table-th">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{recentTransactions && recentTransactions.length > 0
|
|
? (
|
|
recentTransactions.map((transaction) => (
|
|
<tr key={transaction.id}>
|
|
<td class="dashboard-table-td">
|
|
{new Date(transaction.created_on as number)
|
|
.toLocaleDateString()}
|
|
</td>
|
|
<td class="dashboard-table-td">
|
|
{transaction.payment_method}
|
|
</td>
|
|
<td class="dashboard-table-td">
|
|
${transaction.amount?.toLocaleString()}
|
|
</td>
|
|
<td class="dashboard-table-td">
|
|
<span
|
|
class={transaction.transaction_status ===
|
|
"completed"
|
|
? "dashboard-badge dashboard-badge--green"
|
|
: transaction.transaction_status ===
|
|
"pending"
|
|
? "dashboard-badge dashboard-badge--yellow"
|
|
: "dashboard-badge dashboard-badge--red"}
|
|
>
|
|
{transaction.transaction_status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)
|
|
: (
|
|
<tr>
|
|
<td colspan={4} class="dashboard-table-empty">
|
|
No payment history yet
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|