Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,177 @@
|
||||
import { Metadata } from "next";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db";
|
||||
import { Building2, Mail, User2, Phone, ArrowLeft, ExternalLink, Copy } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ShareReviewDialog } from "@/components/clients/ShareReviewDialog";
|
||||
import { ReviewSessionList } from "@/components/clients/ReviewSessionList";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const metadata: Metadata = { title: "Client Detail" };
|
||||
|
||||
async function getClient(clientId: string) {
|
||||
return db.client.findUnique({
|
||||
where: { id: clientId },
|
||||
include: {
|
||||
projects: {
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: {
|
||||
_count: { select: { shots: true } },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function getReviewSessions(projectIds: string[]) {
|
||||
if (projectIds.length === 0) return [];
|
||||
return db.reviewSession.findMany({
|
||||
where: { projectId: { in: projectIds }, isActive: true },
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: { project: { select: { name: true } } },
|
||||
});
|
||||
}
|
||||
|
||||
export default async function ClientDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ clientId: string }>;
|
||||
}) {
|
||||
const { clientId } = await params;
|
||||
const session = await auth();
|
||||
if (!session || !["ADMIN", "PRODUCER"].includes(session.user.role as string)) {
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
const client = await getClient(clientId);
|
||||
if (!client) notFound();
|
||||
|
||||
const projectIds = client.projects.map((p) => p.id);
|
||||
const reviewSessions = await getReviewSessions(projectIds);
|
||||
|
||||
const PROJECT_STATUS_COLORS: Record<string, string> = {
|
||||
ACTIVE: "text-emerald-400 bg-emerald-500/10",
|
||||
COMPLETED: "text-zinc-400 bg-zinc-700",
|
||||
ON_HOLD: "text-amber-400 bg-amber-500/10",
|
||||
CANCELLED: "text-red-400 bg-red-500/10",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto space-y-6">
|
||||
{/* Back */}
|
||||
<Link
|
||||
href="/clients"
|
||||
className="inline-flex items-center gap-1.5 text-sm text-zinc-400 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
All Clients
|
||||
</Link>
|
||||
|
||||
{/* Client header */}
|
||||
<div className="rounded-xl border border-zinc-800 bg-zinc-900 p-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-zinc-800 border border-zinc-700 flex items-center justify-center shrink-0">
|
||||
<Building2 className="h-6 w-6 text-zinc-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">{client.company}</h1>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full mt-1 inline-block",
|
||||
client.isActive
|
||||
? "bg-emerald-500/10 text-emerald-400"
|
||||
: "bg-zinc-700 text-zinc-500"
|
||||
)}
|
||||
>
|
||||
{client.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ShareReviewDialog
|
||||
clientId={client.id}
|
||||
clientEmail={client.email ?? ""}
|
||||
projects={client.projects}
|
||||
>
|
||||
<Button className="gap-2 shrink-0">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Share Review Link
|
||||
</Button>
|
||||
</ShareReviewDialog>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{client.contactPerson && (
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-300">
|
||||
<User2 className="h-4 w-4 text-zinc-600 shrink-0" />
|
||||
<span>{client.contactPerson}</span>
|
||||
</div>
|
||||
)}
|
||||
{client.email && (
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-300">
|
||||
<Mail className="h-4 w-4 text-zinc-600 shrink-0" />
|
||||
<a href={`mailto:${client.email}`} className="hover:text-amber-400 transition-colors">
|
||||
{client.email}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{client.phone && (
|
||||
<div className="flex items-center gap-2 text-sm text-zinc-300">
|
||||
<Phone className="h-4 w-4 text-zinc-600 shrink-0" />
|
||||
<span>{client.phone}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{client.notes && (
|
||||
<p className="mt-4 text-sm text-zinc-400 border-t border-zinc-800 pt-4">
|
||||
{client.notes}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Projects */}
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white mb-3">
|
||||
Projects ({client.projects.length})
|
||||
</h2>
|
||||
{client.projects.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500">No projects assigned to this client.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{client.projects.map((project) => (
|
||||
<Link
|
||||
key={project.id}
|
||||
href={`/projects/${project.id}`}
|
||||
className="flex items-center gap-4 p-4 rounded-xl border border-zinc-800 bg-zinc-900 hover:border-zinc-600 hover:bg-zinc-800/60 transition-all group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-white">{project.name}</p>
|
||||
<p className="text-xs font-mono text-zinc-500">{project.code}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-zinc-500">
|
||||
{project._count.shots} shots
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
PROJECT_STATUS_COLORS[project.status] ?? "text-zinc-400 bg-zinc-700"
|
||||
)}
|
||||
>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Review sessions */}
|
||||
<ReviewSessionList sessions={reviewSessions} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import { db } from "@/lib/db";
|
||||
import { PlusCircle, Building2, Mail, User2, FolderOpen } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { NewClientDialog } from "@/components/clients/NewClientDialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const metadata: Metadata = { title: "Clients" };
|
||||
|
||||
async function getClients() {
|
||||
return db.client.findMany({
|
||||
orderBy: { company: "asc" },
|
||||
include: { _count: { select: { projects: true } } },
|
||||
});
|
||||
}
|
||||
|
||||
export default async function ClientsPage() {
|
||||
const session = await auth();
|
||||
if (!session || !["ADMIN", "PRODUCER"].includes(session.user.role as string)) {
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
const clients = await getClients();
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Clients</h1>
|
||||
<p className="text-sm text-zinc-400 mt-0.5">
|
||||
{clients.length} client{clients.length !== 1 ? "s" : ""} total
|
||||
</p>
|
||||
</div>
|
||||
<NewClientDialog>
|
||||
<Button className="gap-2">
|
||||
<PlusCircle className="h-4 w-4" />
|
||||
New Client
|
||||
</Button>
|
||||
</NewClientDialog>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{clients.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-zinc-700 bg-zinc-900/40 p-16 text-center">
|
||||
<Building2 className="h-10 w-10 mx-auto mb-3 text-zinc-600" />
|
||||
<p className="text-zinc-400 font-medium">No clients yet</p>
|
||||
<p className="text-zinc-600 text-sm mt-1">
|
||||
Add your first client to start sharing reviews.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{clients.map((client) => (
|
||||
<Link
|
||||
key={client.id}
|
||||
href={`/clients/${client.id}`}
|
||||
className={cn(
|
||||
"rounded-xl border border-zinc-800 bg-zinc-900 p-5 space-y-4",
|
||||
"hover:border-zinc-600 hover:bg-zinc-800/60 transition-all group"
|
||||
)}
|
||||
>
|
||||
{/* Avatar + company */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-zinc-800 border border-zinc-700 flex items-center justify-center shrink-0 group-hover:bg-zinc-700 transition-colors">
|
||||
<Building2 className="h-5 w-5 text-zinc-400" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-white truncate">{client.company}</p>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 rounded-full",
|
||||
client.isActive
|
||||
? "bg-emerald-500/10 text-emerald-400"
|
||||
: "bg-zinc-700 text-zinc-500"
|
||||
)}
|
||||
>
|
||||
{client.isActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="space-y-1.5">
|
||||
{client.contactPerson && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<User2 className="h-3.5 w-3.5 text-zinc-600 shrink-0" />
|
||||
<span className="truncate">{client.contactPerson}</span>
|
||||
</div>
|
||||
)}
|
||||
{client.email && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<Mail className="h-3.5 w-3.5 text-zinc-600 shrink-0" />
|
||||
<span className="truncate">{client.email}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project count */}
|
||||
<div className="flex items-center gap-1.5 text-xs text-zinc-500 pt-2 border-t border-zinc-800">
|
||||
<FolderOpen className="h-3.5 w-3.5" />
|
||||
<span>{client._count.projects} project{client._count.projects !== 1 ? "s" : ""}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user