Initial import: property management SaaS + security hardening + admin dashboard
Property Management Network — Next.js 16 (App Router), Better Auth, Drizzle ORM over PostgreSQL, Stripe, OpenAI, Resend. Includes: - Security hardening: access-control/IDOR fixes, TLS-by-default DB layer, constant-time cron auth, strict security headers, atomic AI quota gating, HTML/email output encoding, demo-backdoor disabled in production. - Superadmin dashboard at /admin (overview/MRR, server-paginated users with ban/impersonate/plan/delete, billing, platform activity + admin audit log, AI usage, system health) via the Better Auth admin plugin. - Seed/migration utility scripts under scripts/. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leon Serfaty
@@ -0,0 +1,21 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { desc, eq } from "drizzle-orm"
|
||||
import { db } from "@/lib/db"
|
||||
import { ai_recommendations } from "@/lib/db/schema"
|
||||
import { getSessionUser } from "@/lib/session"
|
||||
import { RecommendationsClient } from "./recommendations-client"
|
||||
|
||||
export const metadata = { title: "AI Recommendations" }
|
||||
|
||||
export default async function RecommendationsPage() {
|
||||
const user = await getSessionUser()
|
||||
if (!user) redirect("/login")
|
||||
|
||||
const recommendations = await db
|
||||
.select()
|
||||
.from(ai_recommendations)
|
||||
.where(eq(ai_recommendations.user_id, user.id))
|
||||
.orderBy(desc(ai_recommendations.created_at))
|
||||
|
||||
return <RecommendationsClient recommendations={recommendations ?? []} />
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user