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,110 @@
|
||||
import { notFound, redirect } from "next/navigation"
|
||||
import { and, eq } from "drizzle-orm"
|
||||
import { db } from "@/lib/db"
|
||||
import { maintenance_requests } from "@/lib/db/schema"
|
||||
import { getSessionUser } from "@/lib/session"
|
||||
import Link from "next/link"
|
||||
import { formatCurrency, formatDate } from "@/lib/utils"
|
||||
import { MaintenanceStatusBadge, PriorityBadge } from "@/components/dashboard/maintenance-status-badge"
|
||||
import { MaintenanceStatusUpdater } from "@/components/forms/maintenance-status-updater"
|
||||
|
||||
export default async function MaintenanceDetailPage({ params }: { params: Promise<{ requestId: string }> }) {
|
||||
const user = await getSessionUser()
|
||||
if (!user) redirect("/login")
|
||||
|
||||
const { requestId } = await params
|
||||
|
||||
const req = await db.query.maintenance_requests.findFirst({
|
||||
where: and(
|
||||
eq(maintenance_requests.id, requestId),
|
||||
eq(maintenance_requests.user_id, user.id)
|
||||
),
|
||||
with: {
|
||||
property: { columns: { name: true, address_line1: true, city: true } },
|
||||
unit: { columns: { unit_number: true } },
|
||||
tenant: { columns: { first_name: true, last_name: true, email: true, phone: true } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!req) notFound()
|
||||
const request = req as any
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-sm text-white/40">
|
||||
<Link href="/maintenance" className="hover:text-white transition">Maintenance</Link>
|
||||
<span>/</span>
|
||||
<span className="text-white/70 truncate">{request.title}</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h2 className="text-xl font-bold text-white">{request.title}</h2>
|
||||
<PriorityBadge priority={request.priority} />
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-white/40">
|
||||
{request.property?.name}{request.unit ? ` · Unit ${request.unit.unit_number}` : ""} · Opened {formatDate(request.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<MaintenanceStatusBadge status={request.status} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main details */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5">
|
||||
<h3 className="mb-3 text-xs font-medium uppercase tracking-wider text-white/30">Description</h3>
|
||||
<p className="text-sm text-white/80 whitespace-pre-wrap">{request.description}</p>
|
||||
|
||||
{request.resolution_notes && (
|
||||
<>
|
||||
<h3 className="mb-2 mt-5 text-xs font-medium uppercase tracking-wider text-white/30">Resolution Notes</h3>
|
||||
<p className="text-sm text-white/80 whitespace-pre-wrap">{request.resolution_notes}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status updater */}
|
||||
<MaintenanceStatusUpdater request={req} />
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-4">
|
||||
{/* Details card */}
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-3">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wider text-white/30">Details</h3>
|
||||
<Row label="Category" value={request.category} />
|
||||
<Row label="Priority" value={request.priority} />
|
||||
<Row label="Status" value={request.status.replace("_", " ")} />
|
||||
{request.assigned_to && <Row label="Assigned To" value={request.assigned_to} />}
|
||||
{request.estimated_cost && <Row label="Est. Cost" value={formatCurrency(request.estimated_cost)} />}
|
||||
{request.actual_cost && <Row label="Actual Cost" value={formatCurrency(request.actual_cost)} />}
|
||||
{request.resolved_at && <Row label="Resolved" value={formatDate(request.resolved_at)} />}
|
||||
</div>
|
||||
|
||||
{/* Tenant card */}
|
||||
{request.tenant && (
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-3">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wider text-white/30">Tenant</h3>
|
||||
<p className="text-sm font-medium text-white">{request.tenant.first_name} {request.tenant.last_name}</p>
|
||||
{request.tenant.email && <p className="text-xs text-white/40">{request.tenant.email}</p>}
|
||||
{request.tenant.phone && <p className="text-xs text-white/40">{request.tenant.phone}</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-white/40">{label}</span>
|
||||
<span className="text-xs font-medium text-white capitalize">{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { CardGridSkeleton } from "@/components/shared/skeleton"
|
||||
|
||||
export default function MaintenanceLoading() {
|
||||
return <CardGridSkeleton cards={6} />
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useMemo } from "react"
|
||||
import Link from "next/link"
|
||||
import { MaintenanceStatusBadge, PriorityBadge } from "@/components/dashboard/maintenance-status-badge"
|
||||
import { EmptyState } from "@/components/shared/empty-state"
|
||||
import { formatDate } from "@/lib/utils"
|
||||
import { Wrench, SlidersHorizontal } from "lucide-react"
|
||||
import { Select } from "@/components/ui/select"
|
||||
|
||||
export function MaintenanceList({ requests, properties }: { requests: any[]; properties: any[] }) {
|
||||
const [propertyId, setPropertyId] = useState("")
|
||||
const [status, setStatus] = useState("")
|
||||
|
||||
const filtered = useMemo(() =>
|
||||
requests.filter((r) => {
|
||||
if (propertyId && r.property_id !== propertyId) return false
|
||||
if (status && r.status !== status) return false
|
||||
return true
|
||||
}), [requests, propertyId, status])
|
||||
|
||||
const open = requests.filter((r) => r.status === "open").length
|
||||
const inProgress = requests.filter((r) => r.status === "in_progress").length
|
||||
const resolved = requests.filter((r) => r.status === "resolved").length
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: "Open", value: open, color: "text-amber-400", dot: "bg-amber-500" },
|
||||
{ label: "In Progress", value: inProgress, color: "text-blue-400", dot: "bg-blue-500" },
|
||||
{ label: "Resolved", value: resolved, color: "text-emerald-400", dot: "bg-emerald-500" },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="rounded-xl border border-white/[0.06] bg-[#16161f] p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`h-1.5 w-1.5 rounded-full ${s.dot}`} />
|
||||
<p className="text-xs text-white/35">{s.label}</p>
|
||||
</div>
|
||||
<p className={`mt-1.5 text-2xl font-bold tabular-nums ${s.color}`}>{s.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<SlidersHorizontal className="h-3.5 w-3.5 text-white/25 shrink-0" />
|
||||
<Select
|
||||
value={propertyId}
|
||||
onChange={setPropertyId}
|
||||
options={[
|
||||
{ value: "", label: "All properties" },
|
||||
...properties.map((p) => ({ value: p.id, label: p.name })),
|
||||
]}
|
||||
className="w-40"
|
||||
/>
|
||||
<Select
|
||||
value={status}
|
||||
onChange={setStatus}
|
||||
options={[
|
||||
{ value: "", label: "All statuses" },
|
||||
{ value: "open", label: "Open" },
|
||||
{ value: "in_progress", label: "In Progress" },
|
||||
{ value: "resolved", label: "Resolved" },
|
||||
{ value: "closed", label: "Closed" },
|
||||
]}
|
||||
className="w-36"
|
||||
/>
|
||||
{(propertyId || status) && (
|
||||
<button
|
||||
onClick={() => { setPropertyId(""); setStatus("") }}
|
||||
className="text-xs text-white/35 hover:text-white/70 transition"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<span className="ml-auto text-xs text-white/25">{filtered.length} result{filtered.length !== 1 ? "s" : ""}</span>
|
||||
</div>
|
||||
|
||||
{!filtered.length ? (
|
||||
<EmptyState
|
||||
icon={Wrench}
|
||||
title="No maintenance requests"
|
||||
description="Create requests to track and manage property maintenance issues."
|
||||
action={{ label: "New request", href: "/maintenance/new" }}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filtered.map((req: any) => (
|
||||
<Link
|
||||
key={req.id}
|
||||
href={`/maintenance/${req.id}`}
|
||||
className="group flex items-start gap-4 rounded-xl border border-white/[0.06] bg-[#16161f] p-4 transition-all duration-150 hover:border-indigo-500/25 hover:bg-[#1a1a2e] hover:shadow-lg hover:shadow-indigo-500/5"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="text-sm font-semibold text-white group-hover:text-indigo-100 transition-colors">{req.title}</p>
|
||||
<PriorityBadge priority={req.priority} />
|
||||
</div>
|
||||
{req.description && (
|
||||
<p className="mt-1 text-xs text-white/40 line-clamp-1">{req.description}</p>
|
||||
)}
|
||||
<div className="mt-2 flex items-center gap-2 flex-wrap text-xs text-white/30">
|
||||
{req.property?.name && <span>{req.property.name}</span>}
|
||||
{req.unit && <span>· Unit {req.unit.unit_number}</span>}
|
||||
{req.tenant && <span>· {req.tenant.first_name} {req.tenant.last_name}</span>}
|
||||
<span>· {formatDate(req.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 mt-0.5">
|
||||
<MaintenanceStatusBadge status={req.status} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { and, asc, eq } from "drizzle-orm"
|
||||
import { db } from "@/lib/db"
|
||||
import { properties, tenants } from "@/lib/db/schema"
|
||||
import { getSessionUser } from "@/lib/session"
|
||||
import { MaintenanceForm } from "@/components/forms/maintenance-form"
|
||||
import { BackButton } from "@/components/ui/back-button"
|
||||
|
||||
export const metadata = { title: "New Maintenance Request" }
|
||||
|
||||
export default async function NewMaintenancePage() {
|
||||
const user = await getSessionUser()
|
||||
if (!user) redirect("/login")
|
||||
|
||||
const [propertyList, tenantList] = await Promise.all([
|
||||
db.query.properties.findMany({
|
||||
where: eq(properties.user_id, user.id),
|
||||
columns: { id: true, name: true },
|
||||
with: {
|
||||
units: { columns: { id: true, unit_number: true } },
|
||||
},
|
||||
orderBy: asc(properties.name),
|
||||
}),
|
||||
db
|
||||
.select({
|
||||
id: tenants.id,
|
||||
first_name: tenants.first_name,
|
||||
last_name: tenants.last_name,
|
||||
unit_id: tenants.unit_id,
|
||||
})
|
||||
.from(tenants)
|
||||
.where(and(eq(tenants.user_id, user.id), eq(tenants.status, "active"))),
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-6">
|
||||
<BackButton href="/maintenance" />
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">New Maintenance Request</h2>
|
||||
<p className="text-sm text-white/40">Log a maintenance issue for a property</p>
|
||||
</div>
|
||||
<MaintenanceForm properties={propertyList ?? []} tenants={tenantList ?? []} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { asc, desc, eq } from "drizzle-orm"
|
||||
import { db } from "@/lib/db"
|
||||
import { maintenance_requests, properties } from "@/lib/db/schema"
|
||||
import { getSessionUser } from "@/lib/session"
|
||||
import Link from "next/link"
|
||||
import { Plus } from "lucide-react"
|
||||
import { MaintenanceList } from "./maintenance-list"
|
||||
|
||||
export const metadata = { title: "Maintenance" }
|
||||
|
||||
export default async function MaintenancePage() {
|
||||
const user = await getSessionUser()
|
||||
if (!user) redirect("/login")
|
||||
|
||||
const [requests, propertyList] = await Promise.all([
|
||||
db.query.maintenance_requests.findMany({
|
||||
where: eq(maintenance_requests.user_id, user.id),
|
||||
with: {
|
||||
property: { columns: { name: true } },
|
||||
unit: { columns: { unit_number: true } },
|
||||
tenant: { columns: { first_name: true, last_name: true } },
|
||||
},
|
||||
orderBy: desc(maintenance_requests.created_at),
|
||||
}),
|
||||
db
|
||||
.select({ id: properties.id, name: properties.name })
|
||||
.from(properties)
|
||||
.where(eq(properties.user_id, user.id))
|
||||
.orderBy(asc(properties.name)),
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Maintenance</h2>
|
||||
<p className="text-sm text-white/40">{requests?.length ?? 0} total requests</p>
|
||||
</div>
|
||||
<Link href="/maintenance/new" className="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition">
|
||||
<Plus className="h-4 w-4" /> New Request
|
||||
</Link>
|
||||
</div>
|
||||
<MaintenanceList requests={requests ?? []} properties={propertyList ?? []} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user