+ 0 ? "attention" : "default"
+ }
+ />
+
+ );
+}
+
+function KpiCard({
+ label,
+ value,
+ loading,
+ href,
+ tone = "default",
+}: {
+ label: string;
+ value: number | undefined;
+ loading: boolean;
+ href: string;
+ tone?: "default" | "attention";
+}) {
+ const inner = (
+
+ {label}
+
+
+ {loading ? (
+
+
+
+ {data.logoUrl ? (
+ // biome-ignore lint/performance/noImgElement: external client logo URLs are not allowlisted for next/image
+ 
+ ) : (
+
+
+
+
+ Notes
+
+
+ {data.notes ? (
+
+
+
+
+ );
+}
+
+function Kpi({ label, value }: { label: string; value: number | string }) {
+ return (
+
+
+ ← All clients
+
+
+
+ {data.name.charAt(0).toUpperCase()}
+
+ )}
+
+
+
+ {data.name}
+
+ {data.status.toLowerCase()}
+ {data.industry && {data.industry}}
+ {data.website && (
+
+ {data.website.replace(/^https?:\/\//, "")}
+
+ )}
+
+
+
+
+ {data.notes}
+ ) : ( ++ No notes yet. Add one from the edit sheet. +
+ )} +
+
+
+ {label}
+
+ {value}
+ {title}
+ {body}
+
+ );
+}
diff --git a/apps/app/app/(app)/[slug]/clients/[clientId]/page.tsx b/apps/app/app/(app)/[slug]/clients/[clientId]/page.tsx
new file mode 100644
index 000000000..39f05be7b
--- /dev/null
+++ b/apps/app/app/(app)/[slug]/clients/[clientId]/page.tsx
@@ -0,0 +1,44 @@
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import {
+ PageShell,
+ PageShellContent,
+ PageShellLoading,
+} from "@/components/page-shell";
+import { requireSession } from "@/lib/session";
+import { HydrateClient } from "@/lib/trpc/hydrate";
+import { getServerQueryClient, getServerTrpc } from "@/lib/trpc/server";
+import { ClientDetail } from "./client-detail";
+
+export default async function ClientPage({
+ params,
+}: {
+ params: Promise<{ slug: string; clientId: string }>;
+}) {
+ const { clientId } = await params;
+ if (!clientId) notFound();
+
+ return (
+
+
+ );
+}
+
+function EmptyState() {
+ return (
+
+
+
+ {isLoading ? (
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ setQ(e.target.value)}
+ placeholder="Search clients…"
+ className="ml-auto h-9 w-64 max-w-full rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+ />
+
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+
+ ) : data?.rows.length === 0 ? (
+
+ {data?.rows.map((row) => (
+
+ )}
+ No clients yet
++ A client is a business you serve. Every contact, deal and form can + belong to one, so filtering by client is one click away. +
+
+ {row.logoUrl ? (
+ // biome-ignore lint/performance/noImgElement: external client logo URLs are not allowlisted for next/image
+ 
+ ) : (
+
+
+
+ {row.name.charAt(0).toUpperCase()}
+
+ )}
+
+
+
+
+ {row.status.toLowerCase()}
+
+
+ + {row.name} +
++ {row.industry ?? row.website ?? row.slug} +
+
+
+
+ {retainer && (
+
+
+ Monthly retainer
+
+ {retainer}
+
+ )}
+
+ );
+}
+
+function Stat({ label, value }: { label: string; value: number }) {
+ return (
+
+
+ );
+}
diff --git a/apps/app/app/(app)/[slug]/clients/create-client-sheet.tsx b/apps/app/app/(app)/[slug]/clients/create-client-sheet.tsx
new file mode 100644
index 000000000..bbd1e00fe
--- /dev/null
+++ b/apps/app/app/(app)/[slug]/clients/create-client-sheet.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { Button } from "@crm/ui/components/button";
+import { Input } from "@crm/ui/components/input";
+import { Label } from "@crm/ui/components/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@crm/ui/components/select";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@crm/ui/components/sheet";
+import { Textarea } from "@crm/ui/components/textarea";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useTRPC } from "@/lib/trpc/client";
+
+const STATUSES = [
+ { value: "ACTIVE", label: "Active" },
+ { value: "ONBOARDING", label: "Onboarding" },
+ { value: "PAUSED", label: "Paused" },
+ { value: "CHURNED", label: "Churned" },
+] as const;
+
+export function CreateClientSheet({ trigger }: { trigger?: ReactNode }) {
+ const trpc = useTRPC();
+ const queryClient = useQueryClient();
+ const [open, setOpen] = useState(false);
+ const [name, setName] = useState("");
+ const [status, setStatus] = useState("ACTIVE");
+ const [industry, setIndustry] = useState("");
+ const [website, setWebsite] = useState("");
+ const [retainer, setRetainer] = useState("");
+ const [notes, setNotes] = useState("");
+
+ const mutation = useMutation(
+ trpc.clientAccounts.create.mutationOptions({
+ onSuccess: async () => {
+ toast.success("Client added");
+ setOpen(false);
+ setName("");
+ setIndustry("");
+ setWebsite("");
+ setRetainer("");
+ setNotes("");
+ await queryClient.invalidateQueries({
+ queryKey: trpc.clientAccounts.list.queryKey(),
+ });
+ await queryClient.invalidateQueries({
+ queryKey: trpc.clientAccounts.options.queryKey(),
+ });
+ },
+ onError: (err) => toast.error(err.message),
+ }),
+ );
+
+ function submit() {
+ if (!name.trim()) return;
+ const cents = retainer ? Math.round(Number(retainer) * 100) : undefined;
+ mutation.mutate({
+ name: name.trim(),
+ status: status as "ACTIVE" | "ONBOARDING" | "PAUSED" | "CHURNED",
+ industry: industry.trim() || undefined,
+ website: website.trim() || undefined,
+ monthlyRetainerCents: Number.isFinite(cents) ? cents : undefined,
+ notes: notes.trim() || undefined,
+ });
+ }
+
+ return (
+ {value}
+ {label}
+