47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { Download } from "lucide-react"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
endpoint: string // e.g. "/api/export/rent" or "/api/export/tenants"
|
||
|
|
filename: string // e.g. "rent-payments.csv"
|
||
|
|
label?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CsvExportButton({ endpoint, filename, label = "Export CSV" }: Props) {
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
|
||
|
|
async function handleExport() {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
const res = await fetch(endpoint)
|
||
|
|
if (!res.ok) throw new Error("Export failed")
|
||
|
|
const blob = await res.blob()
|
||
|
|
const url = URL.createObjectURL(blob)
|
||
|
|
const a = document.createElement("a")
|
||
|
|
a.href = url
|
||
|
|
a.download = filename
|
||
|
|
a.click()
|
||
|
|
URL.revokeObjectURL(url)
|
||
|
|
toast.success(`${filename} downloaded`)
|
||
|
|
} catch {
|
||
|
|
toast.error("Failed to export CSV")
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={handleExport}
|
||
|
|
disabled={loading}
|
||
|
|
className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-white/60 hover:border-white/20 hover:text-white transition disabled:opacity-40"
|
||
|
|
>
|
||
|
|
<Download className="h-4 w-4" />
|
||
|
|
{loading ? "Exporting…" : label}
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|