54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { useRouter } from "next/navigation"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
|
||
|
|
export function RentActions({ payment }: { payment: any }) {
|
||
|
|
const router = useRouter()
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
async function markAs(status: string) {
|
||
|
|
setLoading(true)
|
||
|
|
await fetch(`/api/rent/${payment.id}`, {
|
||
|
|
method: "PATCH",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({
|
||
|
|
status,
|
||
|
|
paid_date: status === "paid" ? new Date().toISOString().slice(0, 10) : null,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
setLoading(false)
|
||
|
|
toast.success(status === "paid" ? "Marked as paid" : "Marked as overdue")
|
||
|
|
router.refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleDelete() {
|
||
|
|
setLoading(true)
|
||
|
|
await fetch(`/api/rent/${payment.id}`, { method: "DELETE" })
|
||
|
|
setLoading(false)
|
||
|
|
toast.success("Payment deleted")
|
||
|
|
router.refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
if (loading) return <span className="text-xs text-white/30">Updating...</span>
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition">
|
||
|
|
{payment.status !== "paid" && (
|
||
|
|
<button onClick={() => markAs("paid")} className="text-xs text-emerald-400 hover:text-emerald-300">
|
||
|
|
Mark Paid
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
{payment.status !== "overdue" && payment.status !== "paid" && (
|
||
|
|
<button onClick={() => markAs("overdue")} className="text-xs text-red-400 hover:text-red-300">
|
||
|
|
Mark Overdue
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<button onClick={handleDelete} className="text-xs text-white/30 hover:text-red-400">
|
||
|
|
Delete
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|