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,57 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
|
||||
interface AnimatedNumberProps {
|
||||
value: number
|
||||
duration?: number
|
||||
format?: "number" | "currency" | "percent"
|
||||
className?: string
|
||||
}
|
||||
|
||||
function formatValue(n: number, format: string) {
|
||||
if (format === "currency") return "$" + n.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
||||
if (format === "percent") return n + "%"
|
||||
return n.toLocaleString()
|
||||
}
|
||||
|
||||
export function AnimatedNumber({
|
||||
value,
|
||||
duration = 900,
|
||||
format = "number",
|
||||
className,
|
||||
}: AnimatedNumberProps) {
|
||||
const [display, setDisplay] = useState(0)
|
||||
const startRef = useRef<number | null>(null)
|
||||
const frameRef = useRef<number>(0)
|
||||
const prevRef = useRef(0)
|
||||
|
||||
useEffect(() => {
|
||||
const from = prevRef.current
|
||||
const to = value
|
||||
prevRef.current = value
|
||||
|
||||
if (from === to) {
|
||||
setDisplay(to)
|
||||
return
|
||||
}
|
||||
|
||||
startRef.current = null
|
||||
|
||||
function tick(ts: number) {
|
||||
if (!startRef.current) startRef.current = ts
|
||||
const elapsed = ts - startRef.current
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
const eased = 1 - Math.pow(1 - progress, 3)
|
||||
setDisplay(Math.round(from + (to - from) * eased))
|
||||
if (progress < 1) {
|
||||
frameRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
}
|
||||
|
||||
frameRef.current = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(frameRef.current)
|
||||
}, [value, duration])
|
||||
|
||||
return <span className={className}>{formatValue(display, format)}</span>
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ArrowLeft } from "lucide-react"
|
||||
|
||||
interface BackButtonProps {
|
||||
href?: string
|
||||
label?: string
|
||||
}
|
||||
|
||||
export function BackButton({ href, label = "Back" }: BackButtonProps) {
|
||||
const router = useRouter()
|
||||
|
||||
function handleClick() {
|
||||
if (href) router.push(href)
|
||||
else router.back()
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="mb-4 flex items-center gap-1.5 text-sm text-white/40 transition hover:text-white/80"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef } from "react"
|
||||
import { AlertTriangle, X } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface ConfirmModalProps {
|
||||
open: boolean
|
||||
title?: string
|
||||
description?: string
|
||||
confirmLabel?: string
|
||||
cancelLabel?: string
|
||||
variant?: "danger" | "warning"
|
||||
loading?: boolean
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export function ConfirmModal({
|
||||
open,
|
||||
title = "Are you sure?",
|
||||
description = "This action cannot be undone.",
|
||||
confirmLabel = "Delete",
|
||||
cancelLabel = "Cancel",
|
||||
variant = "danger",
|
||||
loading = false,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: ConfirmModalProps) {
|
||||
const confirmRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setTimeout(() => confirmRef.current?.focus(), 50)
|
||||
}, [open])
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape" && open) onCancel()
|
||||
}
|
||||
document.addEventListener("keydown", onKey)
|
||||
return () => document.removeEventListener("keydown", onKey)
|
||||
}, [open, onCancel])
|
||||
|
||||
if (!open) return null
|
||||
|
||||
const isDanger = variant === "danger"
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[300] flex items-center justify-center px-4">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={onCancel}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/[0.08] bg-[#16161f] shadow-2xl shadow-black/80 animate-in fade-in zoom-in-95 duration-150">
|
||||
{/* Close */}
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="absolute right-4 top-4 rounded-lg p-1 text-white/30 transition hover:text-white"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="p-6">
|
||||
{/* Icon */}
|
||||
<div className={cn(
|
||||
"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl border",
|
||||
isDanger
|
||||
? "border-red-500/20 bg-red-500/10 text-red-400"
|
||||
: "border-amber-500/20 bg-amber-500/10 text-amber-400"
|
||||
)}>
|
||||
<AlertTriangle className="h-6 w-6" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-center text-base font-bold text-white">{title}</h2>
|
||||
<p className="mt-2 text-center text-sm text-white/50">{description}</p>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 flex gap-3">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="flex-1 rounded-xl border border-white/10 py-2.5 text-sm font-medium text-white/50 transition hover:border-white/20 hover:text-white disabled:opacity-50"
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
ref={confirmRef}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className={cn(
|
||||
"flex-1 rounded-xl py-2.5 text-sm font-semibold text-white transition disabled:opacity-50",
|
||||
isDanger
|
||||
? "bg-red-600 hover:bg-red-500 hover:shadow-lg hover:shadow-red-500/20"
|
||||
: "bg-amber-600 hover:bg-amber-500 hover:shadow-lg hover:shadow-amber-500/20"
|
||||
)}
|
||||
>
|
||||
{loading ? "Deleting…" : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef } from "react"
|
||||
import { useSearchParams } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
/**
|
||||
* Wrap a table row with this to flash it when ?highlight=<id> matches.
|
||||
* Usage: <HighlightRow id={item.id} className="...your tr classes...">
|
||||
*/
|
||||
export function HighlightRow({
|
||||
id,
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
id: string
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
const params = useSearchParams()
|
||||
const highlight = params.get("highlight")
|
||||
const isHighlighted = highlight === id
|
||||
const ref = useRef<HTMLTableRowElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (isHighlighted && ref.current) {
|
||||
ref.current.scrollIntoView({ behavior: "smooth", block: "center" })
|
||||
}
|
||||
}, [isHighlighted])
|
||||
|
||||
return (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
className,
|
||||
isHighlighted && "animate-highlight"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { ArrowUp } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function ScrollToTop() {
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// Watch the main scroll container
|
||||
const el = document.getElementById("main-scroll")
|
||||
if (!el) return
|
||||
function onScroll() { setVisible(el!.scrollTop > 300) }
|
||||
el.addEventListener("scroll", onScroll, { passive: true })
|
||||
return () => el!.removeEventListener("scroll", onScroll)
|
||||
}, [])
|
||||
|
||||
function scrollUp() {
|
||||
document.getElementById("main-scroll")?.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={scrollUp}
|
||||
aria-label="Scroll to top"
|
||||
className={cn(
|
||||
"fixed bottom-6 right-6 z-50 flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.1] bg-[#1d1d2a] shadow-lg shadow-black/40 text-white/50 transition-all duration-300 hover:border-indigo-500/40 hover:bg-indigo-600/20 hover:text-white",
|
||||
visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<ArrowUp className="h-4 w-4" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useRef, useEffect, useCallback } from "react"
|
||||
import { ChevronDown, Check } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface SelectOption {
|
||||
value: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface SelectProps {
|
||||
name?: string
|
||||
value?: string
|
||||
defaultValue?: string
|
||||
onChange?: (value: string) => void
|
||||
options: SelectOption[]
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Select({
|
||||
name,
|
||||
value,
|
||||
defaultValue = "",
|
||||
onChange,
|
||||
options,
|
||||
placeholder = "Select…",
|
||||
required,
|
||||
className,
|
||||
}: SelectProps) {
|
||||
const isControlled = value !== undefined
|
||||
const [internal, setInternal] = useState(defaultValue)
|
||||
const current = isControlled ? value : internal
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [cursor, setCursor] = useState(-1)
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const listRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
function onOutside(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
|
||||
}
|
||||
document.addEventListener("mousedown", onOutside)
|
||||
return () => document.removeEventListener("mousedown", onOutside)
|
||||
}, [])
|
||||
|
||||
// Reset cursor when opening
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
const idx = options.findIndex((o) => o.value === current)
|
||||
setCursor(idx >= 0 ? idx : 0)
|
||||
}
|
||||
}, [open])
|
||||
|
||||
// Scroll cursor into view
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const el = listRef.current?.querySelector(`[data-idx="${cursor}"]`) as HTMLElement
|
||||
el?.scrollIntoView({ block: "nearest" })
|
||||
}, [cursor, open])
|
||||
|
||||
function pick(val: string) {
|
||||
if (!isControlled) setInternal(val)
|
||||
onChange?.(val)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
function onKeyDown(e: React.KeyboardEvent) {
|
||||
if (!open) {
|
||||
if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
|
||||
e.preventDefault()
|
||||
setOpen(true)
|
||||
}
|
||||
return
|
||||
}
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault()
|
||||
setCursor((v) => Math.min(v + 1, options.length - 1))
|
||||
break
|
||||
case "ArrowUp":
|
||||
e.preventDefault()
|
||||
setCursor((v) => Math.max(v - 1, 0))
|
||||
break
|
||||
case "Enter":
|
||||
e.preventDefault()
|
||||
if (cursor >= 0 && options[cursor]) pick(options[cursor].value)
|
||||
break
|
||||
case "Escape":
|
||||
e.preventDefault()
|
||||
setOpen(false)
|
||||
break
|
||||
default: {
|
||||
// Jump to first option starting with typed letter
|
||||
const char = e.key.toLowerCase()
|
||||
if (char.length === 1) {
|
||||
const idx = options.findIndex((o) => o.label.toLowerCase().startsWith(char))
|
||||
if (idx >= 0) setCursor(idx)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selected = options.find((o) => o.value === current)
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("relative", className)}>
|
||||
{/* Hidden input for FormData / native form submission */}
|
||||
{name && (
|
||||
<input type="hidden" name={name} value={current} required={required} readOnly />
|
||||
)}
|
||||
|
||||
{/* Trigger button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
onKeyDown={onKeyDown}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-between gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-left transition-colors",
|
||||
"hover:border-white/20 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500",
|
||||
open && "border-indigo-500/40"
|
||||
)}
|
||||
>
|
||||
<span className={selected ? "text-white" : "text-white/30"}>
|
||||
{selected ? selected.label : placeholder}
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn("h-4 w-4 shrink-0 text-white/30 transition-transform duration-150", open && "rotate-180")}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Dropdown */}
|
||||
{open && (
|
||||
<div
|
||||
role="listbox"
|
||||
className="absolute left-0 right-0 z-[100] mt-1.5 overflow-hidden rounded-xl border border-white/[0.08] bg-[#1d1d2a] shadow-2xl shadow-black/60"
|
||||
>
|
||||
<div ref={listRef} className="max-h-56 overflow-y-auto py-1.5">
|
||||
{options.map((opt, idx) => {
|
||||
const active = current === opt.value
|
||||
const highlighted = cursor === idx
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
data-idx={idx}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
onClick={() => pick(opt.value)}
|
||||
onMouseEnter={() => setCursor(idx)}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between px-4 py-2.5 text-sm text-left transition-colors",
|
||||
highlighted && !active && "bg-white/[0.05] text-white",
|
||||
active
|
||||
? "bg-indigo-500/15 text-indigo-300"
|
||||
: "text-white/75"
|
||||
)}
|
||||
>
|
||||
{opt.label}
|
||||
{active && <Check className="h-3.5 w-3.5 shrink-0 text-indigo-400" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user