422 lines
17 KiB
TypeScript
422 lines
17 KiB
TypeScript
// routes/landlord/approvals/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import { page } from "fresh";
|
|
import { SessionCookie } from "../../auth/callback.ts";
|
|
import { createPublicId } from "../../../helpers.ts";
|
|
import ConfirmSubmitGuard from "../../../islands/ConfirmSubmitGuard.tsx";
|
|
|
|
interface PendingApproval {
|
|
id: string;
|
|
property_id?: string;
|
|
tenant_id?: string;
|
|
approval_status?: string;
|
|
approval_requested_at?: number;
|
|
approved_at?: number;
|
|
approved_by?: string;
|
|
rejection_reason?: string | null;
|
|
property?: {
|
|
id: string;
|
|
title?: string;
|
|
address_1?: string;
|
|
address_2?: string;
|
|
city?: string;
|
|
state?: string;
|
|
zip?: string;
|
|
monthly_rent?: number;
|
|
bedrooms?: number;
|
|
bathrooms?: number;
|
|
} | null;
|
|
tenant?: {
|
|
id: string;
|
|
name?: string;
|
|
email?: string;
|
|
phone?: string;
|
|
} | null;
|
|
}
|
|
|
|
interface LandlordApprovalsData {
|
|
stateData?: SessionCookie;
|
|
approvals?: PendingApproval[];
|
|
error?: string;
|
|
publicId?: string;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface LandlordApprovalsProps {
|
|
data: LandlordApprovalsData;
|
|
}
|
|
|
|
export const handler = define.handlers({
|
|
async GET(ctx) {
|
|
const stateData: SessionCookie = ctx.state.data;
|
|
const { user_id } = stateData;
|
|
|
|
try {
|
|
const response = await fetch("/api/lease/pending-approvals", {
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch pending approvals");
|
|
}
|
|
|
|
const data = await response.json();
|
|
const publicId = await createPublicId(user_id);
|
|
|
|
return page({
|
|
stateData,
|
|
approvals: data.approvals || [],
|
|
error: "",
|
|
publicId,
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading pending approvals:", error);
|
|
const publicId = await createPublicId(user_id);
|
|
return page({
|
|
stateData,
|
|
error: "Failed to load pending approvals",
|
|
publicId,
|
|
});
|
|
}
|
|
},
|
|
|
|
async POST(ctx) {
|
|
try {
|
|
const formData = await ctx.req.formData();
|
|
const lease_id = formData.get("lease_id") as string;
|
|
const action = formData.get("action") as string;
|
|
const rejection_reason = formData.get("rejection_reason") as string || "";
|
|
|
|
if (!lease_id || !action) {
|
|
return new Response(
|
|
JSON.stringify({ error: "lease_id and action are required" }),
|
|
{
|
|
status: 400,
|
|
headers: { "Content-Type": "application/json" },
|
|
},
|
|
);
|
|
}
|
|
|
|
const apiEndpoint = action === "approve"
|
|
? "/api/lease/approve"
|
|
: "/api/lease/reject";
|
|
|
|
const body = action === "reject"
|
|
? { lease_id, rejection_reason }
|
|
: { lease_id };
|
|
|
|
const response = await fetch(apiEndpoint, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(body),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({
|
|
error: "Unknown error",
|
|
}));
|
|
return new Response(
|
|
JSON.stringify({
|
|
error: errorData.error || "Failed to process approval",
|
|
}),
|
|
{
|
|
status: response.status,
|
|
headers: { "Content-Type": "application/json" },
|
|
},
|
|
);
|
|
}
|
|
|
|
return new Response("", {
|
|
status: 302,
|
|
headers: { Location: "/landlord/approvals" },
|
|
});
|
|
} catch (error) {
|
|
console.error("Error processing approval:", error);
|
|
return new Response(
|
|
JSON.stringify({ error: String(error) }),
|
|
{
|
|
status: 500,
|
|
headers: { "Content-Type": "application/json" },
|
|
},
|
|
);
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(
|
|
function LandlordApprovals({ data }: LandlordApprovalsProps) {
|
|
const { approvals, error } = data;
|
|
|
|
return (
|
|
<>
|
|
<ConfirmSubmitGuard />
|
|
<div class="min-h-screen bg-gray-50 landlord-route">
|
|
<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">
|
|
Lease Approvals
|
|
</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Review and manage pending lease approval requests
|
|
</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>
|
|
)}
|
|
|
|
{approvals && approvals.length > 0
|
|
? (
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
|
<ul class="divide-y divide-gray-200">
|
|
{approvals.map((approval) => (
|
|
<li key={approval.id}>
|
|
<div class="px-4 py-4 sm:px-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<span class="text-sm font-medium text-blue-600">
|
|
{approval.tenant?.name?.charAt(0) || "T"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-blue-600 truncate">
|
|
{approval.tenant?.name || "Tenant"}
|
|
</p>
|
|
<span
|
|
class={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
approval.approval_status === "pending"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: approval.approval_status === "approved"
|
|
? "bg-green-100 text-green-800"
|
|
: "bg-red-100 text-red-800"
|
|
}`}
|
|
>
|
|
{approval.approval_status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 flex items-center text-sm text-gray-500">
|
|
<svg
|
|
class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M2.003 5.884L10 9.882l7.997 7.997-1.414 1.414-4.95-4.95-7.071-7.071V13a2 2 0 002-2h12a2 2 0 002-2V6.414L10 9.882z" />
|
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
|
</svg>
|
|
<p>{approval.tenant?.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="sm:flex sm:justify-between">
|
|
<div class="sm:flex">
|
|
<p class="flex items-center text-sm text-gray-500">
|
|
Property: {approval.property?.title ||
|
|
approval.property?.address_1 ||
|
|
"Property Address"}
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
|
<p>
|
|
Monthly Rent:
|
|
${approval.property?.monthly_rent
|
|
? `$${approval.property.monthly_rent.toLocaleString()}/mo`
|
|
: "N/A"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
|
<p>
|
|
Requested: {approval.approval_requested_at
|
|
? new Date(approval.approval_requested_at)
|
|
.toLocaleDateString()
|
|
: "Unknown date"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{approval.approval_status === "pending" && (
|
|
<div class="mt-4 space-y-3">
|
|
<div class="flex space-x-2">
|
|
<form
|
|
method="POST"
|
|
class="inline"
|
|
data-confirm-message="Are you sure you want to approve this lease? This will make the lease active and the tenant will be able to access the property."
|
|
data-confirm-label="Approve"
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="lease_id"
|
|
value={approval.id}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="action"
|
|
value="approve"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
|
>
|
|
Approve
|
|
</button>
|
|
</form>
|
|
<form
|
|
method="POST"
|
|
class="inline"
|
|
data-confirm-message="Are you sure you want to reject this lease request?"
|
|
data-confirm-label="Reject"
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="lease_id"
|
|
value={approval.id}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="action"
|
|
value="reject"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
|
>
|
|
Reject
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<form
|
|
method="POST"
|
|
class="mt-2"
|
|
data-confirm-message="Are you sure you want to reject this lease request?"
|
|
data-confirm-label="Reject with Reason"
|
|
>
|
|
<input
|
|
type="hidden"
|
|
name="lease_id"
|
|
value={approval.id}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="action"
|
|
value="reject"
|
|
/>
|
|
<div>
|
|
<label
|
|
for={`rejection_reason_${approval.id}`}
|
|
class="block text-sm font-medium text-gray-700"
|
|
>
|
|
Rejection Reason (optional)
|
|
</label>
|
|
<textarea
|
|
id={`rejection_reason_${approval.id}`}
|
|
name="rejection_reason"
|
|
rows={3}
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
|
|
placeholder="Provide a reason for rejection..."
|
|
/>
|
|
</div>
|
|
<div class="mt-2">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
|
|
>
|
|
Reject with Reason
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{approval.approval_status === "approved" && (
|
|
<div class="mt-4 rounded-md bg-green-50 border border-green-200 px-4 py-3">
|
|
<p class="text-sm text-green-700">
|
|
This lease has been approved and is now active.
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{approval.approval_status === "rejected" && (
|
|
<div class="mt-4 rounded-md bg-red-50 border border-red-200 px-4 py-3">
|
|
<p class="text-sm text-red-700">
|
|
This lease request has been rejected.
|
|
</p>
|
|
{approval.rejection_reason && (
|
|
<p class="mt-2 text-sm text-red-600">
|
|
<strong>Reason:</strong>{" "}
|
|
{approval.rejection_reason}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
: (
|
|
<div class="text-center py-12">
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2l-4-4m6 2M9 12h6m-6 0h6m-6 0h6"
|
|
/>
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">
|
|
No pending approvals
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
You don't have any pending lease approval requests at this
|
|
time.
|
|
</p>
|
|
<div class="mt-6">
|
|
<a
|
|
href="/landlord/dashboard"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
Return to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
},
|
|
);
|