import Link from "next/link"; import { DashboardShell } from "@/components/dashboard/dashboard-shell"; import { PublicStudioHostLabel, PublicStudioLink, } from "@/components/dashboard/public-studio-link"; import { requireDashboardContext } from "@/core/auth/dashboard-context"; import { buildTenantSubdomainUrl, getTenantPublicHostLabel } from "@/core/config/domains"; import { getRequestHostname } from "@/core/tenant/request-tenant"; import { getStorage } from "@/core/storage/storage"; import { countTenantInquiries, listInquiries } from "@/services/inquiry-service"; import { listDashboardJournal } from "@/services/journal-service"; import { countTenantProjects, listDashboardProjects, } from "@/services/project-service"; import { listTenantMedia } from "@/services/media-service"; import { getArchitectProfile } from "@/services/profile-service"; import { listDashboardServices } from "@/services/studio-services-service"; function formatRelative(date: Date) { const diffMs = Date.now() - date.getTime(); const mins = Math.floor(diffMs / 60000); if (mins < 1) return "Just now"; if (mins < 60) return `${mins}m ago`; const hours = Math.floor(mins / 60); if (hours < 24) return `${hours}h ago`; const days = Math.floor(hours / 24); if (days < 14) return `${days}d ago`; return date.toLocaleDateString(); } function statusTone(status: string) { if (status === "published") return "bg-emerald-500/15 text-emerald-800"; if (status === "archived") { return "bg-[var(--archi-ink)]/10 text-[var(--archi-ink-muted)]"; } return "bg-[var(--archi-gold)]/15 text-[#8a7010]"; } function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } export default async function DashboardOverviewPage() { const ctx = await requireDashboardContext(); const storage = getStorage(); const requestHost = await getRequestHostname(); const siteUrl = buildTenantSubdomainUrl(ctx.tenant.tenantSlug, { requestHost, }); const hostLabel = getTenantPublicHostLabel(ctx.tenant.tenantSlug, { requestHost, }); const [ projectCount, inquiryCount, newInquiries, projects, inquiries, media, services, journalPosts, profileData, ] = await Promise.all([ countTenantProjects(ctx.tenant), countTenantInquiries(ctx.tenant), countTenantInquiries(ctx.tenant, "new"), listDashboardProjects(ctx.tenant), listInquiries(ctx.tenant, 8), listTenantMedia(ctx.tenant, 100), listDashboardServices(ctx.tenant), listDashboardJournal(ctx.tenant), getArchitectProfile(ctx.tenant), ]); const published = projects.filter((p) => p.status === "published").length; const drafts = projects.filter((p) => p.status === "draft").length; const archived = projects.filter((p) => p.status === "archived").length; const publishedServices = services.filter((s) => s.isPublished).length; const publishedJournal = journalPosts.filter( (p) => p.status === "published", ).length; const storageUsed = media.reduce((sum, item) => sum + (item.fileSize || 0), 0); const imageBytes = media .filter((m) => m.fileType === "image") .reduce((sum, item) => sum + (item.fileSize || 0), 0); const docBytes = media .filter((m) => m.fileType !== "image") .reduce((sum, item) => sum + (item.fileSize || 0), 0); const storageCap = 100 * 1024 * 1024; // soft display cap 100MB (local/dev) const storagePct = Math.min(100, Math.round((storageUsed / storageCap) * 100)); const recent = projects.slice(0, 3); const recentWithImages = await Promise.all( recent.map(async (project) => ({ project, imageSrc: project.heroStorageKey ? await storage.getSignedUrl( project.heroStorageKey, ctx.tenant.tenantId, ) : null, })), ); const recentMedia = await Promise.all( media.slice(0, 5).map(async (item) => ({ item, imageSrc: item.fileType === "image" ? await storage.getSignedUrl(item.storageKey, ctx.tenant.tenantId) : null, })), ); const firstName = ctx.user.name?.trim().split(/\s+/)[0] || ctx.user.email?.split("@")[0] || "there"; const activity = [ ...inquiries.slice(0, 4).map((inq) => ({ id: `inq-${inq.id}`, title: `New inquiry from ${inq.name}`, when: formatRelative(new Date(inq.createdAt)), href: `/dashboard/inquiries/${inq.id}`, tone: "inquiry" as const, })), ...recent.slice(0, 3).map((project) => ({ id: `proj-${project.id}`, title: `${project.title} · ${project.status}`, when: formatRelative(new Date(project.updatedAt)), href: `/dashboard/projects/${project.id}`, tone: "project" as const, })), ].slice(0, 5); const pipelineMax = Math.max(published, drafts, archived, 1); const profileReady = Boolean( profileData.profile?.tagline || profileData.profile?.about, ); const kpis = [ { label: "Total projects", value: String(projectCount), hint: `${published} published`, href: "/dashboard/projects", iconBg: "bg-[var(--archi-gold)]/15 text-[#8a7010]", }, { label: "Total inquiries", value: String(inquiryCount), hint: `${newInquiries} awaiting review`, href: "/dashboard/inquiries", iconBg: "bg-[var(--archi-ink)]/8 text-[var(--archi-ink)]", }, { label: "New leads", value: String(newInquiries), hint: "Status: new", href: "/dashboard/inquiries?status=new", iconBg: "bg-emerald-500/12 text-emerald-800", }, { label: "Media assets", value: String(media.length), hint: formatBytes(storageUsed), href: "/dashboard/media", iconBg: "bg-[var(--archi-bg-deep)] text-[var(--archi-ink-muted)]", }, ]; const quickActions = [ { href: "/dashboard/projects/new", label: "New project", tone: "dark" }, { href: "/dashboard/media", label: "Upload media", tone: "gold" }, { href: "/dashboard/services/new", label: "New service", tone: "cream" }, { href: "/dashboard/journal/new", label: "Write journal", tone: "cream" }, { href: "/dashboard/settings", label: "Edit profile", tone: "cream" }, { href: "/dashboard/inquiries", label: "View inquiries", tone: "ink" }, ]; return (

Overview

Welcome back, {firstName}

{ctx.tenant.studioName} ·{" "}

View live studio ↗
{/* KPI row */}
{kpis.map((kpi) => (

{kpi.label}

{kpi.value}

{kpi.hint}

{kpi.label.charAt(0)}
))}
{/* Performance + Activity */}

Studio pipeline

Live · Draft · Archived

{[ { label: "Published", value: published, fill: "var(--archi-gold)" }, { label: "Draft", value: drafts, fill: "var(--archi-ink)" }, { label: "Archived", value: archived, fill: "rgba(18,18,18,0.25)", }, ].map((bar) => (

{bar.label}

{bar.value}

))}
    {[ { label: "Published projects", value: published, hint: "On public site", }, { label: "Published services", value: publishedServices, hint: "Offerings live", }, { label: "Journal posts", value: publishedJournal, hint: "Public writing", }, { label: "Profile readiness", value: profileReady ? "Ready" : "Incomplete", hint: profileReady ? "Tagline / about set" : "Add studio profile", }, ].map((row) => (

  • {row.label}

    {row.hint}

    {row.value}
    • ))}

Recent activity

View all
{activity.length === 0 ? (

Activity appears when you publish projects or receive inquiries.

) : (
    {activity.map((item) => (

  • {item.title}

    {item.when}

    • ))}
)}
{/* Projects + Media + Quick actions + Storage */}

Recent projects

View all
{recentWithImages.length === 0 ? (

Publish projects so visitors see your work on{" "} .

Create project
) : (
{recentWithImages.map(({ project, imageSrc }) => (
{imageSrc ? ( // eslint-disable-next-line @next/next/no-img-element ) : (
No hero
)} {project.status}

{project.title}

Updated {formatRelative(new Date(project.updatedAt))}

))}
)}

Recent media

Library
{recentMedia.length === 0 ? (

Upload from a project page to showcase 3D / photo assets.

) : ( recentMedia.map(({ item, imageSrc }) => (
{imageSrc ? ( // eslint-disable-next-line @next/next/no-img-element {item.altText ) : (
file
)}
)) )} +

Quick actions

{quickActions.map((action) => ( {action.label} ))}

Storage usage

{formatBytes(storageUsed)} used · {media.length} files

0 ? 4 : 0)}%` }} />
  • Images {formatBytes(imageBytes)}
  • Documents / other {formatBytes(docBytes)}

Your public studio

{ctx.tenant.studioName}

Visitors open this link to see your projects, services, journal, and contact form — only this tenant's published work.

Open public profile ↗
); }