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,24 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Copy, Check } from "lucide-react"
|
||||
|
||||
export function CopyButton({ text, className }: { text: string; className?: string }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
async function handleCopy() {
|
||||
await navigator.clipboard.writeText(text)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
title="Copy link"
|
||||
className={className ?? "flex h-7 w-7 items-center justify-center rounded-md text-white/40 transition hover:bg-white/10 hover:text-white"}
|
||||
>
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Trash2 } from "lucide-react"
|
||||
import { ConfirmModal } from "@/components/ui/confirm-modal"
|
||||
import { toast } from "sonner"
|
||||
|
||||
interface DeleteButtonProps {
|
||||
id: string
|
||||
endpoint: string
|
||||
label?: string
|
||||
onDeleted?: () => void
|
||||
}
|
||||
|
||||
export function DeleteButton({ id, endpoint, label = "this item", onDeleted }: DeleteButtonProps) {
|
||||
const router = useRouter()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleDelete() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch(`${endpoint}/${id}`, { method: "DELETE" })
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => null)
|
||||
toast.error(data?.error ?? "Failed to delete")
|
||||
return
|
||||
}
|
||||
toast.success("Deleted successfully")
|
||||
if (onDeleted) onDeleted()
|
||||
else router.refresh()
|
||||
} catch {
|
||||
toast.error("Network error — please try again")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="text-white/20 hover:text-red-400 transition"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
|
||||
<ConfirmModal
|
||||
open={open}
|
||||
title="Delete item?"
|
||||
description={`Are you sure you want to delete ${label}? This cannot be undone.`}
|
||||
confirmLabel="Delete"
|
||||
loading={loading}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={() => setOpen(false)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import Link from "next/link"
|
||||
import type { LucideIcon } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon: LucideIcon
|
||||
title: string
|
||||
description: string
|
||||
action?: { label: string; href: string }
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
|
||||
return (
|
||||
<div className={cn("flex flex-col items-center justify-center py-20 text-center", className)}>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 rounded-2xl bg-indigo-500/10 blur-xl" />
|
||||
<div className="relative flex h-16 w-16 items-center justify-center rounded-2xl border border-white/[0.08] bg-gradient-to-br from-white/[0.07] to-white/[0.02]">
|
||||
<Icon className="h-7 w-7 text-white/40" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mt-5 text-base font-semibold text-white">{title}</h3>
|
||||
<p className="mt-2 max-w-xs text-sm leading-relaxed text-white/40">{description}</p>
|
||||
{action && (
|
||||
<Link
|
||||
href={action.href}
|
||||
className="mt-6 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-500/25"
|
||||
>
|
||||
{action.label}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef } from "react"
|
||||
import { Upload, X, File, Loader2 } from "lucide-react"
|
||||
|
||||
interface FileUploadProps {
|
||||
propertyId: string
|
||||
onUploaded: (doc: { id: string; name: string; file_url: string; file_type: string; file_size: number }) => void
|
||||
}
|
||||
|
||||
export function FileUpload({ propertyId, onUploaded }: FileUploadProps) {
|
||||
const [dragging, setDragging] = useState(false)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
async function upload(file: File) {
|
||||
setUploading(true)
|
||||
setError("")
|
||||
|
||||
const fd = new FormData()
|
||||
fd.append("file", file)
|
||||
fd.append("property_id", propertyId)
|
||||
fd.append("name", file.name.replace(/\.[^/.]+$/, ""))
|
||||
fd.append("category", "general")
|
||||
|
||||
const res = await fetch("/api/documents", { method: "POST", body: fd })
|
||||
const data = await res.json()
|
||||
setUploading(false)
|
||||
|
||||
if (!res.ok) {
|
||||
setError(data.error ?? "Upload failed")
|
||||
return
|
||||
}
|
||||
|
||||
onUploaded(data)
|
||||
}
|
||||
|
||||
function handleFiles(files: FileList | null) {
|
||||
if (!files || files.length === 0) return
|
||||
upload(files[0])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
|
||||
onDragLeave={() => setDragging(false)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragging(false); handleFiles(e.dataTransfer.files) }}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
className={`flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 transition ${
|
||||
dragging ? "border-indigo-500 bg-indigo-500/5" : "border-white/10 bg-white/[0.02] hover:border-white/20"
|
||||
}`}
|
||||
>
|
||||
<input ref={inputRef} type="file" className="hidden" onChange={(e) => handleFiles(e.target.files)} />
|
||||
{uploading ? (
|
||||
<Loader2 className="h-7 w-7 animate-spin text-indigo-400" />
|
||||
) : (
|
||||
<Upload className="h-7 w-7 text-white/30" />
|
||||
)}
|
||||
<p className="text-sm text-white/50">
|
||||
{uploading ? "Uploading..." : "Drop a file here or click to browse"}
|
||||
</p>
|
||||
<p className="text-xs text-white/30">PDF, DOC, JPG, PNG — max 20 MB</p>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-400">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import Link from "next/link"
|
||||
import { Building2 } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type Size = "sm" | "md" | "lg"
|
||||
|
||||
const SIZES: Record<Size, { box: string; icon: string; title: string; sub: string; gap: string }> = {
|
||||
sm: { box: "h-7 w-7", icon: "h-4 w-4", title: "text-xs", sub: "text-[9px]", gap: "gap-2" },
|
||||
md: { box: "h-8 w-8", icon: "h-[18px] w-[18px]", title: "text-[13px]", sub: "text-[10px]", gap: "gap-2.5" },
|
||||
lg: { box: "h-9 w-9", icon: "h-5 w-5", title: "text-[15px]", sub: "text-[11px]", gap: "gap-2.5" },
|
||||
}
|
||||
|
||||
/** The brand mark — gradient rounded square with the building glyph. */
|
||||
export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
|
||||
const s = SIZES[size]
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/25",
|
||||
s.box,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Building2 className={s.icon} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Full brand lockup: mark + "Property Management" / "Network" wordmark.
|
||||
* Designed for the app's dark surfaces (white title, indigo accent).
|
||||
* Pass `href={null}` to render a non-link version.
|
||||
*/
|
||||
export function Logo({
|
||||
size = "md",
|
||||
className,
|
||||
href = "/",
|
||||
}: {
|
||||
size?: Size
|
||||
className?: string
|
||||
href?: string | null
|
||||
}) {
|
||||
const s = SIZES[size]
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<LogoMark size={size} />
|
||||
<span className="flex flex-col leading-none">
|
||||
<span className={cn("font-bold tracking-tight text-white", s.title)}>Property Management</span>
|
||||
<span className={cn("font-semibold uppercase tracking-[0.18em] text-indigo-400", s.sub)}>Network</span>
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
|
||||
const classes = cn("flex items-center", s.gap, className)
|
||||
|
||||
return href ? (
|
||||
<Link href={href} className={classes}>
|
||||
{content}
|
||||
</Link>
|
||||
) : (
|
||||
<div className={classes}>{content}</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Bell, Loader2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
export function SendReminderButton({ tenantId, paymentId }: { tenantId: string; paymentId: string }) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function send() {
|
||||
setLoading(true)
|
||||
const res = await fetch("/api/notifications", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ type: "rent_reminder", tenant_id: tenantId, payment_id: paymentId }),
|
||||
})
|
||||
setLoading(false)
|
||||
if (res.ok) toast.success("Reminder sent")
|
||||
else toast.error("Failed to send reminder")
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={send}
|
||||
disabled={loading}
|
||||
title="Send rent reminder"
|
||||
className="flex h-7 items-center gap-1.5 rounded-md border border-white/10 px-2.5 text-xs text-white/50 transition hover:border-amber-500/30 hover:text-amber-400 disabled:opacity-40"
|
||||
>
|
||||
{loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Bell className="h-3 w-3" />}
|
||||
Remind
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import React from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div className={cn("animate-pulse rounded-lg bg-white/[0.05]", className)} style={style} />
|
||||
)
|
||||
}
|
||||
|
||||
export function DashboardSkeleton() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Greeting */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-48" />
|
||||
<Skeleton className="h-3.5 w-60" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-44 rounded-xl" />
|
||||
</div>
|
||||
|
||||
{/* Stats grid */}
|
||||
<div className="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<Skeleton className="h-3 w-20" />
|
||||
<Skeleton className="h-9 w-9 rounded-xl" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-24" />
|
||||
<Skeleton className="h-1.5 w-full rounded-full" />
|
||||
<Skeleton className="h-3 w-28" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Revenue + Quick Actions */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5">
|
||||
<div className="lg:col-span-2 rounded-2xl border border-white/[0.06] bg-[#16161f] p-5 space-y-4">
|
||||
<div className="space-y-1">
|
||||
<Skeleton className="h-3 w-32" />
|
||||
<Skeleton className="h-7 w-28" />
|
||||
</div>
|
||||
<div className="flex items-end gap-2 h-24">
|
||||
{[40, 65, 80, 55, 90, 70].map((h, i) => (
|
||||
<Skeleton key={i} className="flex-1 rounded-t-lg" style={{ height: `${h}%` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5 space-y-2">
|
||||
<Skeleton className="h-3 w-28 mb-3" />
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-10 w-full rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two col layout */}
|
||||
<div className="grid gap-4 sm:gap-5 lg:grid-cols-2">
|
||||
{[0, 1].map((i) => (
|
||||
<div key={i} className="rounded-2xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
|
||||
<div className="border-b border-white/[0.06] px-5 py-4 flex items-center justify-between">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-3.5 w-14" />
|
||||
</div>
|
||||
<div className="divide-y divide-white/[0.04]">
|
||||
{Array.from({ length: 4 }).map((_, j) => (
|
||||
<div key={j} className="flex items-center justify-between px-5 py-3.5 gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton className="h-8 w-8 rounded-full shrink-0" />
|
||||
<div className="space-y-1.5">
|
||||
<Skeleton className="h-3.5 w-32" />
|
||||
<Skeleton className="h-3 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-5 w-16 rounded-full shrink-0" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableSkeleton({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-3.5 w-36" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-28 rounded-lg" />
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
|
||||
<div className="border-b border-white/[0.06] px-5 py-3 flex gap-6">
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-3 w-20" />
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-white/[0.04]">
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-6 px-5 py-4">
|
||||
{Array.from({ length: cols }).map((_, j) => (
|
||||
<Skeleton key={j} className="h-4 w-24" />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CardGridSkeleton({ cards = 6 }: { cards?: number }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<Skeleton className="h-3.5 w-40" />
|
||||
</div>
|
||||
<Skeleton className="h-9 w-32 rounded-lg" />
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: cards }).map((_, i) => (
|
||||
<div key={i} className="rounded-xl border border-white/[0.06] bg-[#16161f] p-5 space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="h-5 w-12 rounded-full" />
|
||||
</div>
|
||||
<Skeleton className="h-3.5 w-48" />
|
||||
<Skeleton className="h-3 w-24" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { X, Zap } from "lucide-react"
|
||||
import { CheckoutButton } from "@/components/forms/checkout-button"
|
||||
|
||||
interface UpgradeModalProps {
|
||||
trigger: React.ReactNode
|
||||
reason?: string
|
||||
}
|
||||
|
||||
export function UpgradeModal({ trigger, reason }: UpgradeModalProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div onClick={() => setOpen(true)}>{trigger}</div>
|
||||
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setOpen(false)} />
|
||||
<div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-[#16161f] p-6 shadow-2xl">
|
||||
<button onClick={() => setOpen(false)} className="absolute right-4 top-4 text-white/30 hover:text-white transition">
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600/20">
|
||||
<Zap className="h-6 w-6 text-indigo-400" />
|
||||
</div>
|
||||
|
||||
<h2 className="mt-4 text-lg font-bold text-white">Upgrade your plan</h2>
|
||||
<p className="mt-2 text-sm text-white/50">
|
||||
{reason ?? "You've reached the limit of your current plan. Upgrade to continue."}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="rounded-lg border border-indigo-500/20 bg-indigo-600/5 p-4">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="font-semibold text-white">Pro</span>
|
||||
<span className="text-white/60">$29<span className="text-xs">/mo</span></span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-white/40">10 properties · Unlimited tenants · AI features</p>
|
||||
<div className="mt-3">
|
||||
<CheckoutButton plan="pro" label="Upgrade to Pro" highlight />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-white/[0.06] p-4">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<span className="font-semibold text-white">Lifetime</span>
|
||||
<span className="text-white/60">$199<span className="text-xs"> once</span></span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-white/40">Unlimited everything · Forever</p>
|
||||
<div className="mt-3">
|
||||
<CheckoutButton plan="lifetime" label="Get Lifetime Deal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user