123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
interface AddLeaseDialogProps {
|
|
leases: any[];
|
|
propertyId: string;
|
|
propertyTitle: string;
|
|
propertyAddress: string;
|
|
propertyCost?: number; // New prop for default rent
|
|
popupKey?: number;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export default function AddLeaseDialog(
|
|
{
|
|
leases,
|
|
propertyId,
|
|
propertyTitle,
|
|
propertyAddress,
|
|
propertyCost,
|
|
onClose = () => {},
|
|
}: AddLeaseDialogProps,
|
|
) {
|
|
const [form, setForm] = useState({
|
|
property_id: propertyId,
|
|
title: propertyTitle + " " + propertyAddress,
|
|
|
|
start_date: new Date().toISOString().split("T")[0],
|
|
end_date: new Date(new Date().getTime() + 12 * 30 * 24 * 60 * 60 * 1000)
|
|
.toISOString().split("T")[0],
|
|
rent: propertyCost !== undefined ? String(propertyCost) : "",
|
|
security_deposit: "",
|
|
});
|
|
|
|
return (
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
|
|
<form
|
|
method="POST"
|
|
action="/api/create/lease"
|
|
class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
|
|
>
|
|
<h3 class="text-xl font-bold mb-2">Add Lease</h3>
|
|
<div class="bg-gray-100 rounded p-2 mb-2 text-sm">
|
|
<div>
|
|
<span class="font-semibold">{propertyTitle}</span>
|
|
</div>
|
|
<div>{propertyAddress}</div>
|
|
</div>
|
|
<input
|
|
name="sender"
|
|
type="hidden"
|
|
value={typeof location !== "undefined" ? location.pathname : ""}
|
|
/>
|
|
<input
|
|
name="property_id"
|
|
type="hidden"
|
|
value={form.property_id}
|
|
readOnly
|
|
/>
|
|
<label class="block text-sm font-medium mb-1">Lease Title</label>
|
|
<input
|
|
name="title"
|
|
class="border p-2 rounded w-full mb-2"
|
|
value={form.title}
|
|
onInput={(e) =>
|
|
setForm({ ...form, title: (e.target as HTMLInputElement).value })}
|
|
required
|
|
/>
|
|
<input
|
|
name="start_date"
|
|
type="date"
|
|
placeholder="Start Date"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.start_date}
|
|
onInput={(e) =>
|
|
setForm({ ...form, start_date: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="end_date"
|
|
type="date"
|
|
placeholder="End Date"
|
|
class="border p-2 rounded w-full"
|
|
value={form.end_date}
|
|
onInput={(e) => setForm({ ...form, end_date: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="rent"
|
|
type="number"
|
|
placeholder="Rent"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.rent}
|
|
onInput={(e) => setForm({ ...form, rent: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="security_deposit"
|
|
type="number"
|
|
placeholder="Security Deposit"
|
|
class="border p-2 rounded w-full"
|
|
value={form.security_deposit}
|
|
onInput={(e) =>
|
|
setForm({ ...form, security_deposit: e.currentTarget.value })}
|
|
/>
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 rounded border"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 rounded bg-blue-600 text-white"
|
|
>
|
|
Create Lease
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|