193 lines
8.8 KiB
TypeScript
193 lines
8.8 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
import {
|
||
|
|
Zap, TrendingUp, AlertTriangle, Wrench, FileText,
|
||
|
|
DollarSign, RefreshCw, CheckCircle, XCircle, Loader2,
|
||
|
|
Lightbulb, ShieldAlert,
|
||
|
|
} from "lucide-react"
|
||
|
|
|
||
|
|
const typeConfig: Record<string, { icon: React.ElementType; color: string; bg: string; border: string }> = {
|
||
|
|
rent_increase: { icon: TrendingUp, color: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-500/20" },
|
||
|
|
vacancy_alert: { icon: AlertTriangle, color: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-500/20" },
|
||
|
|
maintenance_urgent: { icon: Wrench, color: "text-red-400", bg: "bg-red-500/10", border: "border-red-500/20" },
|
||
|
|
lease_renewal: { icon: FileText, color: "text-blue-400", bg: "bg-blue-500/10", border: "border-blue-500/20" },
|
||
|
|
expense_alert: { icon: DollarSign, color: "text-orange-400", bg: "bg-orange-500/10", border: "border-orange-500/20" },
|
||
|
|
cash_flow: { icon: TrendingUp, color: "text-indigo-400", bg: "bg-indigo-500/10", border: "border-indigo-500/20" },
|
||
|
|
risk_alert: { icon: ShieldAlert, color: "text-red-400", bg: "bg-red-500/10", border: "border-red-500/20" },
|
||
|
|
opportunity: { icon: Lightbulb, color: "text-violet-400", bg: "bg-violet-500/10", border: "border-violet-500/20" },
|
||
|
|
}
|
||
|
|
|
||
|
|
const priorityBadge: Record<string, string> = {
|
||
|
|
high: "text-red-400 bg-red-500/10 ring-red-500/20",
|
||
|
|
medium: "text-amber-400 bg-amber-500/10 ring-amber-500/20",
|
||
|
|
low: "text-white/40 bg-white/5 ring-white/10",
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RecommendationsClient({ recommendations: initial }: { recommendations: any[] }) {
|
||
|
|
const [recs, setRecs] = useState(initial)
|
||
|
|
const [generating, setGenerating] = useState(false)
|
||
|
|
const [actionLoading, setActionLoading] = useState<string | null>(null)
|
||
|
|
const [filter, setFilter] = useState<"pending" | "approved" | "dismissed">("pending")
|
||
|
|
|
||
|
|
const filtered = recs.filter((r) => r.status === filter)
|
||
|
|
const pendingCount = recs.filter((r) => r.status === "pending").length
|
||
|
|
|
||
|
|
async function generate() {
|
||
|
|
setGenerating(true)
|
||
|
|
try {
|
||
|
|
const res = await fetch("/api/ai/recommendations", { method: "POST" })
|
||
|
|
const data = await res.json()
|
||
|
|
if (!res.ok) { toast.error(data.error ?? "Failed to generate"); return }
|
||
|
|
setRecs((prev) => [...data, ...prev.filter((r) => r.status !== "pending")])
|
||
|
|
toast.success(`${data.length} recommendations generated`)
|
||
|
|
setFilter("pending")
|
||
|
|
} catch {
|
||
|
|
toast.error("Network error — please try again")
|
||
|
|
} finally {
|
||
|
|
setGenerating(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateStatus(id: string, status: "approved" | "dismissed") {
|
||
|
|
setActionLoading(id + status)
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/ai/recommendations/${id}`, {
|
||
|
|
method: "PATCH",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ status }),
|
||
|
|
})
|
||
|
|
const data = await res.json()
|
||
|
|
if (!res.ok) { toast.error(data.error ?? "Failed to update"); return }
|
||
|
|
setRecs((prev) => prev.map((r) => r.id === id ? data : r))
|
||
|
|
toast.success(status === "approved" ? "Recommendation approved!" : "Dismissed")
|
||
|
|
} catch {
|
||
|
|
toast.error("Network error — please try again")
|
||
|
|
} finally {
|
||
|
|
setActionLoading(null)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-end justify-between">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||
|
|
<Zap className="h-5 w-5 text-violet-400" />
|
||
|
|
AI Recommendations
|
||
|
|
</h2>
|
||
|
|
<p className="text-sm text-white/40 mt-0.5">
|
||
|
|
Smart suggestions based on your portfolio data
|
||
|
|
{pendingCount > 0 && <span className="ml-2 text-violet-400">{pendingCount} pending</span>}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={generate}
|
||
|
|
disabled={generating}
|
||
|
|
className="flex items-center gap-2 rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-violet-500 disabled:opacity-50 transition"
|
||
|
|
>
|
||
|
|
{generating ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||
|
|
{generating ? "Analyzing…" : "Generate New"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Filter tabs */}
|
||
|
|
<div className="flex gap-1 rounded-xl border border-white/[0.06] bg-[#16161f] p-1 w-fit">
|
||
|
|
{(["pending", "approved", "dismissed"] as const).map((s) => (
|
||
|
|
<button
|
||
|
|
key={s}
|
||
|
|
onClick={() => setFilter(s)}
|
||
|
|
className={`rounded-lg px-4 py-1.5 text-xs font-medium capitalize transition ${
|
||
|
|
filter === s ? "bg-white/10 text-white" : "text-white/40 hover:text-white"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{s} ({recs.filter((r) => r.status === s).length})
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* List */}
|
||
|
|
{filtered.length === 0 ? (
|
||
|
|
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] py-16 text-center">
|
||
|
|
<Zap className="h-8 w-8 text-white/10 mx-auto mb-3" />
|
||
|
|
<p className="text-sm text-white/30">
|
||
|
|
{filter === "pending" ? "No pending recommendations" : `No ${filter} recommendations`}
|
||
|
|
</p>
|
||
|
|
{filter === "pending" && (
|
||
|
|
<p className="text-xs text-white/20 mt-1">Click "Generate New" to analyze your portfolio</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-3">
|
||
|
|
{filtered.map((rec) => {
|
||
|
|
const cfg = typeConfig[rec.type] ?? typeConfig.opportunity
|
||
|
|
const Icon = cfg.icon
|
||
|
|
return (
|
||
|
|
<div key={rec.id} className={`rounded-xl border ${cfg.border} bg-[#16161f] p-5`}>
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${cfg.bg}`}>
|
||
|
|
<Icon className={`h-5 w-5 ${cfg.color}`} />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-2 flex-wrap">
|
||
|
|
<p className="text-sm font-semibold text-white">{rec.title}</p>
|
||
|
|
<span className={`rounded-full px-2 py-0.5 text-[10px] font-medium capitalize ring-1 ring-inset ${priorityBadge[rec.priority] ?? priorityBadge.low}`}>
|
||
|
|
{rec.priority}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-white/50 mt-1.5 leading-relaxed">{rec.description}</p>
|
||
|
|
{rec.impact && (
|
||
|
|
<p className={`text-xs font-medium mt-2 ${cfg.color}`}>↗ {rec.impact}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{rec.status === "pending" && (
|
||
|
|
<div className="flex items-center gap-2 mt-4 pt-4 border-t border-white/[0.06]">
|
||
|
|
<button
|
||
|
|
onClick={() => updateStatus(rec.id, "approved")}
|
||
|
|
disabled={!!actionLoading}
|
||
|
|
className="flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-500 disabled:opacity-50 transition"
|
||
|
|
>
|
||
|
|
{actionLoading === rec.id + "approved"
|
||
|
|
? <Loader2 className="h-3 w-3 animate-spin" />
|
||
|
|
: <CheckCircle className="h-3 w-3" />}
|
||
|
|
{rec.action_label ?? "Apply"}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => updateStatus(rec.id, "dismissed")}
|
||
|
|
disabled={!!actionLoading}
|
||
|
|
className="flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-white/40 hover:text-white disabled:opacity-50 transition"
|
||
|
|
>
|
||
|
|
{actionLoading === rec.id + "dismissed"
|
||
|
|
? <Loader2 className="h-3 w-3 animate-spin" />
|
||
|
|
: <XCircle className="h-3 w-3" />}
|
||
|
|
Dismiss
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{rec.status === "approved" && (
|
||
|
|
<div className="flex items-center gap-1.5 mt-4 pt-4 border-t border-white/[0.06]">
|
||
|
|
<CheckCircle className="h-3.5 w-3.5 text-emerald-400" />
|
||
|
|
<span className="text-xs text-emerald-400">Approved</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{rec.status === "dismissed" && (
|
||
|
|
<div className="flex items-center gap-1.5 mt-4 pt-4 border-t border-white/[0.06]">
|
||
|
|
<XCircle className="h-3.5 w-3.5 text-white/20" />
|
||
|
|
<span className="text-xs text-white/30">Dismissed</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|