351 lines
15 KiB
TypeScript
351 lines
15 KiB
TypeScript
// routes/landlord/maintenance/index.tsx
|
|
import { define } from "../../../utils.ts";
|
|
import {
|
|
getMaintenanceDataByLandlord,
|
|
MaintenanceData,
|
|
updateMaintenanceRequestStatus,
|
|
} from "../../../services/maintenanceRequestService.ts";
|
|
import { page } from "fresh";
|
|
import { SessionCookie } from "../../auth/callback.ts";
|
|
import MaintenanceQuickActions from "../../../islands/MaintenanceQuickActions.tsx";
|
|
|
|
interface LandlordMaintenancePageData {
|
|
stateData?: SessionCookie;
|
|
maintenanceRequests?: MaintenanceData[];
|
|
error?: string;
|
|
}
|
|
|
|
interface LandlordMaintenanceProps {
|
|
data: LandlordMaintenancePageData;
|
|
}
|
|
|
|
export const handler = define.handlers({
|
|
async GET(ctx) {
|
|
const stateData: SessionCookie = ctx.state.data;
|
|
const { user_id } = stateData;
|
|
|
|
try {
|
|
const maintenanceRequests: MaintenanceData[] =
|
|
await getMaintenanceDataByLandlord(user_id);
|
|
|
|
return page({
|
|
stateData,
|
|
maintenanceRequests,
|
|
});
|
|
} catch (error) {
|
|
console.error("Error loading maintenance requests:", error);
|
|
return page({
|
|
stateData,
|
|
error: "Failed to load maintenance requests",
|
|
});
|
|
}
|
|
},
|
|
|
|
async POST(ctx) {
|
|
const stateData: SessionCookie = ctx.state.data;
|
|
|
|
try {
|
|
const formData = await ctx.req.formData();
|
|
const request_id = formData.get("request_id") as string;
|
|
const new_status = formData.get("new_status") as string;
|
|
const new_priority = formData.get("new_priority") as string;
|
|
|
|
const updateData: { status?: string; priority?: string } = {};
|
|
if (new_status) updateData.status = new_status;
|
|
if (new_priority) updateData.priority = new_priority;
|
|
|
|
if (Object.keys(updateData).length > 0) {
|
|
await updateMaintenanceRequestStatus(request_id, updateData);
|
|
}
|
|
|
|
return new Response("", {
|
|
status: 302,
|
|
headers: { Location: "/landlord/maintenance" },
|
|
});
|
|
} catch (error) {
|
|
console.error("Error updating maintenance request:", error);
|
|
return page({
|
|
stateData,
|
|
error: "Failed to update maintenance request",
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
export default define.page(
|
|
function LandlordMaintenance({ data }: LandlordMaintenanceProps) {
|
|
const { stateData: _stateData, maintenanceRequests, error } = data;
|
|
|
|
return (
|
|
<div class="min-h-screen bg-gray-50 landlord-route">
|
|
{/* 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">
|
|
Maintenance Requests
|
|
</h1>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Manage maintenance requests from your tenants
|
|
</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>
|
|
)}
|
|
|
|
{/* Status Filter */}
|
|
<div class="mb-6">
|
|
<div class="border-b border-gray-200">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<a
|
|
href="#"
|
|
class="border-blue-500 text-blue-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
|
|
>
|
|
All Requests ({maintenanceRequests?.length || 0})
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
|
|
>
|
|
Open
|
|
({maintenanceRequests?.filter((req) => req.status === "open")
|
|
.length || 0})
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
|
|
>
|
|
In Progress ({maintenanceRequests?.filter((req) =>
|
|
req.status === "in_progress"
|
|
).length || 0})
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
|
|
>
|
|
Completed ({maintenanceRequests?.filter((req) =>
|
|
req.status === "completed"
|
|
).length || 0})
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{maintenanceRequests && maintenanceRequests.length > 0
|
|
? (
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
|
<ul class="divide-y divide-gray-200">
|
|
{maintenanceRequests.map((request) => (
|
|
<li key={request.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 flex items-center justify-center ${
|
|
request.priority === "emergency"
|
|
? "bg-red-100"
|
|
: request.priority === "high"
|
|
? "bg-orange-100"
|
|
: request.priority === "medium"
|
|
? "bg-yellow-100"
|
|
: "bg-gray-100"
|
|
}`}
|
|
>
|
|
<span
|
|
class={`text-sm font-medium ${
|
|
request.priority === "emergency"
|
|
? "text-red-700"
|
|
: request.priority === "high"
|
|
? "text-orange-700"
|
|
: request.priority === "medium"
|
|
? "text-yellow-700"
|
|
: "text-gray-700"
|
|
}`}
|
|
>
|
|
{request.priority?.charAt(0).toUpperCase() ||
|
|
"L"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-4">
|
|
<div class="flex items-center">
|
|
<p class="text-sm font-medium text-blue-600 truncate">
|
|
{request.description}
|
|
</p>
|
|
<span
|
|
class={`ml-2 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"
|
|
: request.status === "completed"
|
|
? "bg-green-100 text-green-800"
|
|
: "bg-gray-100 text-gray-800"
|
|
}`}
|
|
>
|
|
{request.status?.replace("_", " ") || "open"}
|
|
</span>
|
|
</div>
|
|
<div class="mt-2 flex">
|
|
<div class="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
|
|
fill-rule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p>{request.tenant_name || "Tenant"}</p>
|
|
</div>
|
|
<div class="ml-6 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
|
|
fill-rule="evenodd"
|
|
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p>
|
|
{new Date(request.created_on)
|
|
.toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div class="ml-6 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
|
|
fill-rule="evenodd"
|
|
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a1.994 1.994 0 01-1.414.586H7a4 4 0 01-4-4V7a4 4 0 014-4z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<p class="capitalize">
|
|
{request.request_type || "general"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
{request.status !== "completed" && (
|
|
<>
|
|
<MaintenanceQuickActions
|
|
requestId={request.id}
|
|
status={request.status}
|
|
priority={request.priority}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<a
|
|
href={`/landlord/maintenance/${request.id}`}
|
|
class="text-sm text-blue-600 hover:text-blue-500"
|
|
>
|
|
View Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<div class="sm:flex sm:justify-between">
|
|
<div class="sm:flex">
|
|
<p class="flex items-center text-sm text-gray-500">
|
|
Property:{" "}
|
|
{request.property_address || "Property Address"}
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
|
<span
|
|
class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
|
|
request.priority === "emergency"
|
|
? "bg-red-100 text-red-800"
|
|
: request.priority === "high"
|
|
? "bg-orange-100 text-orange-800"
|
|
: request.priority === "medium"
|
|
? "bg-yellow-100 text-yellow-800"
|
|
: "bg-gray-100 text-gray-800"
|
|
}`}
|
|
>
|
|
{request.priority} priority
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{request.description && (
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-600 line-clamp-2">
|
|
{request.description}
|
|
</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="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>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">
|
|
No maintenance requests
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
You don't have any maintenance requests from tenants yet.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
);
|