Consolidate audit-fixes branch: webhooks, integrations, and deploy hardening
Batch commit of the pending working tree on security/audit-fixes-2026-07. Major areas: - Outbound webhooks / Zapier: schema + signed delivery with retries, public v1 API (REST-hook subscribe/unsubscribe), settings UI, cron drain. - Deploy hardening: email via SMTP2GO (Resend fully removed), verified DB TLS (DATABASE_SSL=require + DATABASE_CA), storage fails loud in production when Spaces is unconfigured instead of silently using ephemeral disk. - Integrations & features (concurrent work): accounting (QuickBooks/Xero), e-signature (DocuSign/Dropbox Sign), PayPal, geocoding/maps, onboarding, expanded legal pages. - DB migrations 0006–0009. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Leon Serfaty
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
969d5d4c8a
commit
c9968531e4
@@ -1,222 +1,227 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ChevronLeft, ChevronRight, CreditCard, FileText } from "lucide-react"
|
||||
import { cn, formatCurrency } from "@/lib/utils"
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import FullCalendar from "@fullcalendar/react"
|
||||
import dayGridPlugin from "@fullcalendar/daygrid"
|
||||
import timeGridPlugin from "@fullcalendar/timegrid"
|
||||
import listPlugin from "@fullcalendar/list"
|
||||
import interactionPlugin from "@fullcalendar/interaction"
|
||||
import type { EventClickArg, EventDropArg } from "@fullcalendar/core"
|
||||
import { toast } from "sonner"
|
||||
import { CreditCard, FileText, ClipboardList, X, CalendarDays, Copy, Check, ArrowRight } from "lucide-react"
|
||||
import "./calendar.css"
|
||||
|
||||
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
|
||||
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"]
|
||||
type EventType = "rent" | "lease" | "inspection"
|
||||
|
||||
interface CalendarClientProps {
|
||||
payments: any[]
|
||||
leases: any[]
|
||||
export interface CalEvent {
|
||||
id: string
|
||||
title: string
|
||||
start: string
|
||||
allDay: boolean
|
||||
backgroundColor: string
|
||||
borderColor: string
|
||||
editable: boolean
|
||||
extendedProps: {
|
||||
type: EventType
|
||||
entityId: string
|
||||
status?: string
|
||||
subtitle: string
|
||||
href: string
|
||||
}
|
||||
}
|
||||
|
||||
export function CalendarClient({ payments, leases }: CalendarClientProps) {
|
||||
const today = new Date()
|
||||
const [year, setYear] = useState(today.getFullYear())
|
||||
const [month, setMonth] = useState(today.getMonth())
|
||||
const [selected, setSelected] = useState<string | null>(null)
|
||||
const TYPE_META: Record<EventType, { label: string; color: string; Icon: typeof CreditCard }> = {
|
||||
rent: { label: "Rent", color: "#6366f1", Icon: CreditCard },
|
||||
lease: { label: "Leases", color: "#f59e0b", Icon: FileText },
|
||||
inspection: { label: "Inspections", color: "#14b8a6", Icon: ClipboardList },
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
if (month === 0) { setMonth(11); setYear(y => y - 1) }
|
||||
else setMonth(m => m - 1)
|
||||
}
|
||||
function nextMonth() {
|
||||
if (month === 11) { setMonth(0); setYear(y => y + 1) }
|
||||
else setMonth(m => m + 1)
|
||||
export function CalendarClient({
|
||||
events,
|
||||
canWrite,
|
||||
subscribeUrl,
|
||||
}: {
|
||||
events: CalEvent[]
|
||||
canWrite: boolean
|
||||
subscribeUrl: string
|
||||
}) {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const [active, setActive] = useState<Record<EventType, boolean>>({ rent: true, lease: true, inspection: true })
|
||||
const [selected, setSelected] = useState<(CalEvent["extendedProps"] & { title: string; start: string }) | null>(null)
|
||||
const [showSubscribe, setShowSubscribe] = useState(false)
|
||||
|
||||
useEffect(() => setMounted(true), [])
|
||||
|
||||
const shown = events.filter((e) => active[e.extendedProps.type])
|
||||
|
||||
function toggle(t: EventType) {
|
||||
setActive((a) => ({ ...a, [t]: !a[t] }))
|
||||
}
|
||||
|
||||
// Build calendar grid
|
||||
const firstDay = new Date(year, month, 1).getDay()
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate()
|
||||
const cells: (number | null)[] = [
|
||||
...Array(firstDay).fill(null),
|
||||
...Array.from({ length: daysInMonth }, (_, i) => i + 1),
|
||||
]
|
||||
// Pad to complete last row
|
||||
while (cells.length % 7 !== 0) cells.push(null)
|
||||
|
||||
function dateKey(day: number) {
|
||||
return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
|
||||
function onEventClick(info: EventClickArg) {
|
||||
info.jsEvent.preventDefault()
|
||||
const p = info.event.extendedProps as CalEvent["extendedProps"]
|
||||
setSelected({ ...p, title: info.event.title, start: info.event.startStr })
|
||||
}
|
||||
|
||||
// Group events by date
|
||||
const eventsByDate: Record<string, { type: "payment" | "lease"; item: any }[]> = {}
|
||||
|
||||
for (const p of payments) {
|
||||
const key = p.due_date?.slice(0, 10)
|
||||
if (!key) continue
|
||||
if (!eventsByDate[key]) eventsByDate[key] = []
|
||||
eventsByDate[key].push({ type: "payment", item: p })
|
||||
async function onEventDrop(info: EventDropArg) {
|
||||
const { type, entityId } = info.event.extendedProps as CalEvent["extendedProps"]
|
||||
if (!canWrite || type === "lease") {
|
||||
info.revert()
|
||||
toast.error(type === "lease" ? "Lease end dates can't be moved here" : "You don't have permission to reschedule")
|
||||
return
|
||||
}
|
||||
const newDate = info.event.startStr.slice(0, 10)
|
||||
const endpoint = type === "rent" ? `/api/rent/${entityId}` : `/api/inspections/${entityId}`
|
||||
const body = type === "rent" ? { due_date: newDate } : { date: newDate }
|
||||
try {
|
||||
const res = await fetch(endpoint, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })
|
||||
if (res.ok) toast.success(`Rescheduled to ${newDate}`)
|
||||
else {
|
||||
info.revert()
|
||||
toast.error("Couldn't reschedule")
|
||||
}
|
||||
} catch {
|
||||
info.revert()
|
||||
toast.error("Network error")
|
||||
}
|
||||
}
|
||||
|
||||
for (const l of leases) {
|
||||
const key = l.lease_end?.slice(0, 10)
|
||||
if (!key) continue
|
||||
if (!eventsByDate[key]) eventsByDate[key] = []
|
||||
eventsByDate[key].push({ type: "lease", item: l })
|
||||
}
|
||||
|
||||
const selectedEvents = selected ? (eventsByDate[selected] ?? []) : []
|
||||
|
||||
const todayKey = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
{/* Calendar grid */}
|
||||
<div className="lg:col-span-2 rounded-2xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
|
||||
{/* Month nav */}
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-4">
|
||||
<button onClick={prevMonth} className="rounded-lg p-1.5 text-white/40 hover:text-white transition hover:bg-white/[0.05]">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<h3 className="text-sm font-semibold text-white">{MONTHS[month]} {year}</h3>
|
||||
<button onClick={nextMonth} className="rounded-lg p-1.5 text-white/40 hover:text-white transition hover:bg-white/[0.05]">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Day headers */}
|
||||
<div className="grid grid-cols-7 border-b border-white/[0.04]">
|
||||
{DAYS.map((d) => (
|
||||
<div key={d} className="py-2 text-center text-[10px] font-semibold uppercase tracking-wider text-white/25">
|
||||
{d}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Days */}
|
||||
<div className="grid grid-cols-7">
|
||||
{cells.map((day, i) => {
|
||||
const key = day ? dateKey(day) : null
|
||||
const events = key ? (eventsByDate[key] ?? []) : []
|
||||
const isToday = key === todayKey
|
||||
const isSelected = key === selected
|
||||
const paymentEvents = events.filter((e) => e.type === "payment")
|
||||
const leaseEvents = events.filter((e) => e.type === "lease")
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar: filters + subscribe */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{(Object.keys(TYPE_META) as EventType[]).map((t) => {
|
||||
const m = TYPE_META[t]
|
||||
const on = active[t]
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => day && key && setSelected(isSelected ? null : key)}
|
||||
className={cn(
|
||||
"relative min-h-[72px] border-b border-r border-white/[0.03] p-1.5 transition-colors",
|
||||
day ? "cursor-pointer hover:bg-white/[0.03]" : "opacity-0 pointer-events-none",
|
||||
isSelected && "bg-indigo-600/10 border-indigo-500/20",
|
||||
)}
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => toggle(t)}
|
||||
className="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition"
|
||||
style={{
|
||||
borderColor: on ? m.color + "66" : "rgba(255,255,255,0.08)",
|
||||
background: on ? m.color + "1a" : "transparent",
|
||||
color: on ? "#fff" : "rgba(255,255,255,0.4)",
|
||||
}}
|
||||
>
|
||||
{day && (
|
||||
<>
|
||||
<span className={cn(
|
||||
"flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
|
||||
isToday ? "bg-indigo-600 text-white font-bold" : "text-white/50"
|
||||
)}>
|
||||
{day}
|
||||
</span>
|
||||
<div className="mt-1 space-y-0.5">
|
||||
{paymentEvents.slice(0, 2).map((e, j) => (
|
||||
<div key={j} className={cn(
|
||||
"truncate rounded px-1 py-0.5 text-[9px] font-medium",
|
||||
e.item.status === "paid"
|
||||
? "bg-emerald-500/15 text-emerald-400"
|
||||
: e.item.status === "overdue"
|
||||
? "bg-red-500/15 text-red-400"
|
||||
: "bg-indigo-500/15 text-indigo-400"
|
||||
)}>
|
||||
{e.item.tenant?.first_name} {formatCurrency(e.item.amount)}
|
||||
</div>
|
||||
))}
|
||||
{leaseEvents.slice(0, 1).map((e, j) => (
|
||||
<div key={j} className="truncate rounded bg-amber-500/15 px-1 py-0.5 text-[9px] font-medium text-amber-400">
|
||||
Lease ends: {e.item.tenant?.first_name}
|
||||
</div>
|
||||
))}
|
||||
{events.length > 3 && (
|
||||
<div className="text-[9px] text-white/30 px-1">+{events.length - 3} more</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<span className="h-2 w-2 rounded-full" style={{ background: m.color, opacity: on ? 1 : 0.4 }} />
|
||||
{m.label}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowSubscribe(true)}
|
||||
className="flex items-center gap-2 rounded-lg border border-indigo-500/30 bg-indigo-500/10 px-3 py-1.5 text-xs font-semibold text-indigo-300 transition hover:bg-indigo-500/15"
|
||||
>
|
||||
<CalendarDays className="h-3.5 w-3.5" /> Subscribe / Sync
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
|
||||
<div className="border-b border-white/[0.06] px-5 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
{selected ? new Date(selected + "T12:00:00").toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }) : "Select a date"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{!selected ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-4">
|
||||
<p className="text-sm text-white/30">Click any day to see events</p>
|
||||
</div>
|
||||
) : selectedEvents.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-4">
|
||||
<p className="text-sm text-white/30">No events this day</p>
|
||||
</div>
|
||||
{/* Calendar */}
|
||||
<div className="fc-dark rounded-2xl border border-white/[0.06] bg-[#16161f] p-3 sm:p-4">
|
||||
{mounted ? (
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
headerToolbar={{ left: "prev,next today", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth" }}
|
||||
buttonText={{ today: "Today", month: "Month", week: "Week", day: "Day", list: "Agenda" }}
|
||||
events={shown}
|
||||
editable={canWrite}
|
||||
eventStartEditable={canWrite}
|
||||
eventDurationEditable={false}
|
||||
dayMaxEvents={4}
|
||||
height="auto"
|
||||
firstDay={0}
|
||||
eventClick={onEventClick}
|
||||
eventDrop={onEventDrop}
|
||||
noEventsText="Nothing scheduled"
|
||||
/>
|
||||
) : (
|
||||
<div className="divide-y divide-white/[0.04] p-3 space-y-1">
|
||||
{selectedEvents.map((e, i) => (
|
||||
<div key={i} className={cn(
|
||||
"flex items-start gap-3 rounded-xl p-3",
|
||||
e.type === "payment" ? "bg-indigo-500/5" : "bg-amber-500/5"
|
||||
)}>
|
||||
<div className={cn(
|
||||
"flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border",
|
||||
e.type === "payment"
|
||||
? "border-indigo-500/20 bg-indigo-500/10 text-indigo-400"
|
||||
: "border-amber-500/20 bg-amber-500/10 text-amber-400"
|
||||
)}>
|
||||
{e.type === "payment" ? <CreditCard className="h-3.5 w-3.5" /> : <FileText className="h-3.5 w-3.5" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
{e.type === "payment" ? (
|
||||
<>
|
||||
<p className="text-xs font-semibold text-white">{e.item.tenant?.first_name} {e.item.tenant?.last_name}</p>
|
||||
<p className="text-xs text-white/40">{formatCurrency(e.item.amount)} due</p>
|
||||
<span className={cn(
|
||||
"mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium capitalize",
|
||||
e.item.status === "paid" ? "bg-emerald-500/15 text-emerald-400" :
|
||||
e.item.status === "overdue" ? "bg-red-500/15 text-red-400" :
|
||||
"bg-white/10 text-white/40"
|
||||
)}>
|
||||
{e.item.status}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs font-semibold text-white">Lease Expiry</p>
|
||||
<p className="text-xs text-white/40">{e.item.tenant?.first_name} {e.item.tenant?.last_name}</p>
|
||||
<p className="text-xs text-white/30">{e.item.property?.name}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex h-[520px] items-center justify-center text-sm text-white/30">Loading calendar…</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="border-t border-white/[0.06] px-5 py-3 space-y-1.5">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-white/20 mb-2">Legend</p>
|
||||
{[
|
||||
{ color: "bg-indigo-500/20 text-indigo-400", label: "Rent pending" },
|
||||
{ color: "bg-emerald-500/20 text-emerald-400", label: "Rent paid" },
|
||||
{ color: "bg-red-500/20 text-red-400", label: "Rent overdue" },
|
||||
{ color: "bg-amber-500/20 text-amber-400", label: "Lease expiry" },
|
||||
].map((l) => (
|
||||
<div key={l.label} className="flex items-center gap-2">
|
||||
<div className={cn("h-2 w-2 rounded-full", l.color)} />
|
||||
<span className="text-xs text-white/40">{l.label}</span>
|
||||
{selected && <EventDetail ev={selected} onClose={() => setSelected(null)} />}
|
||||
{showSubscribe && <SubscribeModal url={subscribeUrl} onClose={() => setShowSubscribe(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EventDetail({ ev, onClose }: { ev: CalEvent["extendedProps"] & { title: string; start: string }; onClose: () => void }) {
|
||||
const m = TYPE_META[ev.type]
|
||||
const dateLabel = new Date(ev.start + "T12:00:00").toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" })
|
||||
return (
|
||||
<div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" onClick={onClose}>
|
||||
<div className="w-full max-w-sm rounded-2xl border border-white/10 bg-[#16161f] p-5" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="mb-4 flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-xl border" style={{ borderColor: m.color + "33", background: m.color + "1a", color: m.color }}>
|
||||
<m.Icon className="h-4 w-4" />
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{ev.title}</p>
|
||||
<p className="text-xs text-white/40">{m.label}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-white/30 transition hover:text-white"><X className="h-4 w-4" /></button>
|
||||
</div>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<div className="flex justify-between gap-4"><dt className="text-white/40">Date</dt><dd className="text-white/80">{dateLabel}</dd></div>
|
||||
{ev.subtitle && <div className="flex justify-between gap-4"><dt className="text-white/40">Details</dt><dd className="text-right text-white/80">{ev.subtitle}</dd></div>}
|
||||
{ev.status && <div className="flex justify-between gap-4"><dt className="text-white/40">Status</dt><dd className="capitalize text-white/80">{ev.status}</dd></div>}
|
||||
</dl>
|
||||
<Link href={ev.href} className="mt-5 flex items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-500">
|
||||
Open {m.label.toLowerCase()} <ArrowRight className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SubscribeModal({ url, onClose }: { url: string; onClose: () => void }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const webcal = url.replace(/^https?:\/\//, "webcal://")
|
||||
return (
|
||||
<div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" onClick={onClose}>
|
||||
<div className="w-full max-w-lg rounded-2xl border border-white/10 bg-[#16161f] p-6" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-white">Subscribe to your calendar</h3>
|
||||
<p className="mt-1 text-xs text-white/45">One-way sync — new rent, lease, and inspection dates appear automatically in your calendar app.</p>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-white/30 transition hover:text-white"><X className="h-4 w-4" /></button>
|
||||
</div>
|
||||
|
||||
{url ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] p-2">
|
||||
<input readOnly value={url} className="flex-1 bg-transparent px-2 text-xs text-white/70 outline-none" onFocus={(e) => e.currentTarget.select()} />
|
||||
<button
|
||||
onClick={() => { navigator.clipboard.writeText(url).catch(() => {}); setCopied(true); setTimeout(() => setCopied(false), 2000) }}
|
||||
className="flex items-center gap-1 rounded-md bg-indigo-600 px-2.5 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-500"
|
||||
>
|
||||
{copied ? <><Check className="h-3 w-3" /> Copied</> : <><Copy className="h-3 w-3" /> Copy</>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-2.5 text-xs text-white/55">
|
||||
<p><strong className="text-white/80">Google Calendar:</strong> Settings → Add calendar → <em>From URL</em> → paste the link.</p>
|
||||
<p><strong className="text-white/80">Apple Calendar:</strong> File → New Calendar Subscription → paste, or open <a href={webcal} className="text-indigo-400 hover:text-indigo-300">this webcal link</a>.</p>
|
||||
<p><strong className="text-white/80">Outlook:</strong> Add calendar → Subscribe from web → paste the link.</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-white/[0.06] pt-4">
|
||||
<p className="text-[11px] text-white/30">Keep this link private — anyone with it can view your dates.</p>
|
||||
<a href={url} download className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-white/70 transition hover:bg-white/[0.06]">Download .ics</a>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-white/50">Your feed link isn't available yet. Refresh the page and try again.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
/* Dark theme for FullCalendar, scoped to .fc-dark to match the app's aesthetic. */
|
||||
.fc-dark {
|
||||
--fc-border-color: rgba(255, 255, 255, 0.06);
|
||||
--fc-page-bg-color: transparent;
|
||||
--fc-neutral-bg-color: rgba(255, 255, 255, 0.02);
|
||||
--fc-neutral-text-color: rgba(255, 255, 255, 0.5);
|
||||
--fc-today-bg-color: rgba(99, 102, 241, 0.1);
|
||||
--fc-now-indicator-color: #6366f1;
|
||||
--fc-list-event-hover-bg-color: rgba(255, 255, 255, 0.04);
|
||||
--fc-highlight-color: rgba(99, 102, 241, 0.15);
|
||||
}
|
||||
|
||||
.fc-dark .fc {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.fc-dark .fc .fc-toolbar.fc-header-toolbar {
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.fc-dark .fc .fc-toolbar-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.fc-dark .fc .fc-button {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 0.55rem;
|
||||
}
|
||||
.fc-dark .fc .fc-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.fc-dark .fc .fc-button:focus,
|
||||
.fc-dark .fc .fc-button:active {
|
||||
box-shadow: none !important;
|
||||
outline: none;
|
||||
}
|
||||
.fc-dark .fc .fc-button-primary:not(:disabled).fc-button-active,
|
||||
.fc-dark .fc .fc-button-primary:not(:disabled):active {
|
||||
background: #4f46e5;
|
||||
border-color: #4f46e5;
|
||||
color: #fff;
|
||||
}
|
||||
.fc-dark .fc .fc-button:disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.fc-dark .fc .fc-button-group > .fc-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Grid headers + cells */
|
||||
.fc-dark .fc .fc-col-header-cell-cushion {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.6rem 0.4rem;
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-day-number {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.78rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
}
|
||||
.fc-dark .fc .fc-day-today .fc-daygrid-day-number {
|
||||
color: #a5b4fc;
|
||||
font-weight: 700;
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-day.fc-day-other {
|
||||
background: rgba(255, 255, 255, 0.012);
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Events */
|
||||
.fc-dark .fc .fc-event {
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
padding: 1px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc-dark .fc .fc-event:hover {
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-event .fc-event-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-more-link {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fc-dark .fc .fc-daygrid-more-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.fc-dark .fc .fc-popover {
|
||||
background: #16161f;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.fc-dark .fc .fc-popover-header {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Time grid (week/day) */
|
||||
.fc-dark .fc .fc-timegrid-slot-label-cushion,
|
||||
.fc-dark .fc .fc-timegrid-axis-cushion {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
/* List / agenda view */
|
||||
.fc-dark .fc .fc-list {
|
||||
border-color: var(--fc-border-color);
|
||||
}
|
||||
.fc-dark .fc .fc-list-day-cushion {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #fff;
|
||||
}
|
||||
.fc-dark .fc .fc-list-event:hover td {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.fc-dark .fc .fc-list-event-title,
|
||||
.fc-dark .fc .fc-list-event-time {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.fc-dark .fc .fc-list-empty {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@@ -1,52 +1,125 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { and, eq, gte, lte } from "drizzle-orm"
|
||||
import { db } from "@/lib/db"
|
||||
import { rent_payments, leases } from "@/lib/db/schema"
|
||||
import { profiles, rent_payments, leases, inspections } from "@/lib/db/schema"
|
||||
import { getSessionUser } from "@/lib/session"
|
||||
import { CalendarClient } from "./calendar-client"
|
||||
import { getAccountContext } from "@/lib/account"
|
||||
import { CalendarClient, type CalEvent } from "./calendar-client"
|
||||
|
||||
export const metadata = { title: "Calendar" }
|
||||
|
||||
const RENT_COLOR = (s: string) =>
|
||||
s === "paid" ? "#10b981" : s === "overdue" ? "#ef4444" : "#6366f1"
|
||||
const LEASE_COLOR = "#f59e0b"
|
||||
const INSPECTION_COLOR = "#14b8a6"
|
||||
|
||||
export default async function CalendarPage() {
|
||||
const user = await getSessionUser()
|
||||
if (!user) redirect("/login")
|
||||
|
||||
const now = new Date()
|
||||
const rangeStart = new Date(now.getFullYear(), now.getMonth() - 1, 1)
|
||||
const rangeEnd = new Date(now.getFullYear(), now.getMonth() + 3, 0)
|
||||
const ctx = await getAccountContext(user.id)
|
||||
const ownerId = ctx.ownerId
|
||||
|
||||
const [payments, leaseList] = await Promise.all([
|
||||
const now = new Date()
|
||||
const rangeStart = new Date(now.getFullYear(), now.getMonth() - 3, 1)
|
||||
const rangeEnd = new Date(now.getFullYear(), now.getMonth() + 12, 0)
|
||||
const iso = (d: Date) => d.toISOString().slice(0, 10)
|
||||
|
||||
const [payments, leaseList, inspectionList, profile] = await Promise.all([
|
||||
db.query.rent_payments.findMany({
|
||||
where: and(
|
||||
eq(rent_payments.user_id, user.id),
|
||||
gte(rent_payments.due_date, rangeStart.toISOString().slice(0, 10)),
|
||||
lte(rent_payments.due_date, rangeEnd.toISOString().slice(0, 10))
|
||||
eq(rent_payments.user_id, ownerId),
|
||||
gte(rent_payments.due_date, iso(rangeStart)),
|
||||
lte(rent_payments.due_date, iso(rangeEnd))
|
||||
),
|
||||
columns: { id: true, due_date: true, amount: true, status: true },
|
||||
with: {
|
||||
tenant: { columns: { first_name: true, last_name: true } },
|
||||
},
|
||||
with: { tenant: { columns: { first_name: true, last_name: true } }, property: { columns: { name: true } }, unit: { columns: { unit_number: true } } },
|
||||
}),
|
||||
db.query.leases.findMany({
|
||||
where: and(
|
||||
eq(leases.user_id, user.id),
|
||||
gte(leases.lease_end, new Date().toISOString().slice(0, 10))
|
||||
),
|
||||
where: and(eq(leases.user_id, ownerId), eq(leases.status, "active")),
|
||||
columns: { id: true, lease_end: true },
|
||||
with: {
|
||||
tenant: { columns: { first_name: true, last_name: true } },
|
||||
property: { columns: { name: true } },
|
||||
},
|
||||
with: { tenant: { columns: { first_name: true, last_name: true } }, property: { columns: { name: true } } },
|
||||
}),
|
||||
db.query.inspections.findMany({
|
||||
where: and(eq(inspections.user_id, ownerId), gte(inspections.date, iso(rangeStart)), lte(inspections.date, iso(rangeEnd))),
|
||||
columns: { id: true, date: true, type: true, status: true },
|
||||
with: { property: { columns: { name: true } }, unit: { columns: { unit_number: true } } },
|
||||
}),
|
||||
db.query.profiles.findFirst({ where: eq(profiles.id, ownerId), columns: { calendar_token: true } }),
|
||||
])
|
||||
|
||||
const events: CalEvent[] = [
|
||||
...payments.map((p) => {
|
||||
const who = `${p.tenant?.first_name ?? ""} ${p.tenant?.last_name ?? ""}`.trim() || "Tenant"
|
||||
const color = RENT_COLOR(p.status)
|
||||
return {
|
||||
id: `rent-${p.id}`,
|
||||
title: `${who} · $${Number(p.amount).toLocaleString("en-US")}`,
|
||||
start: p.due_date!,
|
||||
allDay: true,
|
||||
backgroundColor: color,
|
||||
borderColor: color,
|
||||
editable: ctx.canWrite,
|
||||
extendedProps: {
|
||||
type: "rent" as const,
|
||||
entityId: p.id,
|
||||
status: p.status,
|
||||
subtitle: `${p.property?.name ?? ""}${p.unit ? ` · Unit ${p.unit.unit_number}` : ""}`,
|
||||
href: "/rent",
|
||||
},
|
||||
}
|
||||
}),
|
||||
...leaseList.map((l) => {
|
||||
const who = `${l.tenant?.first_name ?? ""} ${l.tenant?.last_name ?? ""}`.trim() || "Tenant"
|
||||
return {
|
||||
id: `lease-${l.id}`,
|
||||
title: `Lease ends: ${who}`,
|
||||
start: l.lease_end!,
|
||||
allDay: true,
|
||||
backgroundColor: LEASE_COLOR,
|
||||
borderColor: LEASE_COLOR,
|
||||
editable: false,
|
||||
extendedProps: {
|
||||
type: "lease" as const,
|
||||
entityId: l.id,
|
||||
subtitle: l.property?.name ?? "",
|
||||
href: `/leases/${l.id}`,
|
||||
},
|
||||
}
|
||||
}),
|
||||
...inspectionList.map((ins) => {
|
||||
const label = ins.type.replace("_", "-")
|
||||
return {
|
||||
id: `insp-${ins.id}`,
|
||||
title: `${label} inspection`,
|
||||
start: ins.date!,
|
||||
allDay: true,
|
||||
backgroundColor: INSPECTION_COLOR,
|
||||
borderColor: INSPECTION_COLOR,
|
||||
editable: ctx.canWrite,
|
||||
extendedProps: {
|
||||
type: "inspection" as const,
|
||||
entityId: ins.id,
|
||||
status: ins.status,
|
||||
subtitle: `${ins.property?.name ?? ""}${ins.unit ? ` · Unit ${ins.unit.unit_number}` : ""}`,
|
||||
href: "/inspections",
|
||||
},
|
||||
}
|
||||
}),
|
||||
]
|
||||
|
||||
const base = process.env.NEXT_PUBLIC_APP_URL ?? ""
|
||||
const subscribeUrl = profile?.calendar_token ? `${base}/api/calendar/${profile.calendar_token}.ics` : ""
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-bold text-white">Calendar</h2>
|
||||
<p className="text-sm text-white/40 mt-0.5">Rent due dates and lease expirations at a glance</p>
|
||||
<p className="text-sm text-white/40 mt-0.5">
|
||||
Rent due dates, lease expirations, and inspections — subscribe to sync with Google, Apple, or Outlook.
|
||||
</p>
|
||||
</div>
|
||||
<CalendarClient payments={payments ?? []} leases={leaseList ?? []} />
|
||||
<CalendarClient events={events} canWrite={ctx.canWrite} subscribeUrl={subscribeUrl} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user