100 lines
3.5 KiB
TypeScript
100 lines
3.5 KiB
TypeScript
interface RentalsOwnedProps {
|
|
properties: Property[];
|
|
}
|
|
|
|
import { Property } from "../db/interfaces.ts";
|
|
import { PopAddRentalDialog } from "./dialogs/PopAddRentalDialog.tsx";
|
|
|
|
export default function RentalsOwned({ properties }: RentalsOwnedProps) {
|
|
const [popAddRental, popupAddRentalDialog] = PopAddRentalDialog(properties);
|
|
return (
|
|
<>
|
|
{popupAddRentalDialog}
|
|
<button
|
|
type="button"
|
|
aria-label="Go back"
|
|
onClick={() => globalThis.location.href = "/"}
|
|
class="back-button"
|
|
>
|
|
<svg
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polyline points="15 18 9 12 15 6" />
|
|
</svg>
|
|
</button>
|
|
<div class="flex flex-col gap-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-2xl font-bold">Your Rentals</h2>
|
|
<button
|
|
type="button"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-semibold shadow-lg transition-colors duration-200"
|
|
onClick={() => popAddRental("Add a new rental")}
|
|
>
|
|
+ Add Rental
|
|
</button>
|
|
</div>
|
|
{properties.length === 0
|
|
? (
|
|
<div class="text-gray-500 text-center">
|
|
You do not own any rental properties yet.
|
|
</div>
|
|
)
|
|
: (
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{properties.map((property: Property) => (
|
|
<div
|
|
key={property.id}
|
|
class="rounded-xl shadow-lg bg-white hover:bg-blue-50 transition flex flex-col p-4 border border-gray-100 relative"
|
|
>
|
|
{
|
|
/* <button
|
|
type="button"
|
|
class={`absolute top-3 right-3 px-4 py-1 rounded-full font-semibold shadow transition-colors duration-200 text-xs z-10
|
|
${
|
|
property.lease_count
|
|
? "bg-green-600 hover:bg-green-700 text-white"
|
|
: "bg-gray-300 text-gray-500 cursor-not-allowed"
|
|
}`}
|
|
disabled={!property?.lease_count}
|
|
>
|
|
Manage Leases ({property?.lease_count ?? 0})
|
|
</button> */
|
|
}
|
|
{property.image_url && (
|
|
<img
|
|
src={property.image_url}
|
|
alt={property.title || "Property Image"}
|
|
class="w-full h-40 object-cover rounded-md mb-2"
|
|
/>
|
|
)}
|
|
<div class="font-semibold text-lg mb-1">
|
|
{property.title || "Untitled Property"}
|
|
</div>
|
|
<div class="text-gray-600 mb-1">
|
|
{property.address_1} {property.city}, {property.state}
|
|
</div>
|
|
<div class="text-blue-700 font-bold">
|
|
${property.price?.toLocaleString() || "-"}
|
|
</div>
|
|
<a
|
|
href={`/rental-property/${property.id}`}
|
|
class="mt-2 text-blue-600 hover:underline text-sm"
|
|
>
|
|
View Details
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|