@btst/stack 5.1.0 → 5.2.0

package/src/plugins/crm/client/components/pages/edit-contact-page.internal.tsx

@@ -0,0 +1,227 @@
+"use client";
+import { useEffect, useState, type FormEvent } from "react";
+import { usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Textarea } from "@workspace/ui/components/textarea";
+import { useContact, useCreateContact, useUpdateContact } from "../../hooks";
+import type { Contact } from "../../../types";
+import type { ContactInput } from "@btst/stack/plugins/crm/query-keys";
+import { CompanyRelationFields } from "../relation-options";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { CrmPage, Field, Feedback, useCrmAction } from "../shared";
+export function EditContactPage({ id }: { id?: string }) {
+	return id ? <ExistingContact id={id} /> : <ContactForm />;
+}
+function ExistingContact({ id }: { id: string }) {
+	const { data } = useContact(id);
+	return <ContactForm key={data.id} contact={data} />;
+}
+function ContactForm({ contact }: { contact?: Contact }) {
+	const [hydrated, setHydrated] = useState(false);
+	useEffect(() => setHydrated(true), []);
+	const create = useCreateContact();
+	const update = useUpdateContact();
+	const { Link, resolve, navigate } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const action = useCrmAction();
+	const [customFields, setCustomFields] = useState(
+		Object.entries(contact?.customFields ?? {}),
+	);
+	const save = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const fields = new FormData(event.currentTarget);
+		const companySelect = event.currentTarget.elements.namedItem(
+			"companyId",
+		) as HTMLSelectElement;
+		void action.run(async () => {
+			const companyId = String(fields.get("companyId") || "");
+			const input: ContactInput = {
+				firstName: String(fields.get("firstName")),
+				lastName: String(fields.get("lastName") || ""),
+				email: String(fields.get("email") || "") || null,
+				phone: String(fields.get("phone") || ""),
+				companyId: companyId || null,
+				company: companyId
+					? (companySelect.selectedOptions[0]?.label ?? "")
+					: String(fields.get("company") || ""),
+				title: String(fields.get("title") || ""),
+				tags: String(fields.get("tags") || "")
+					.split(",")
+					.map((t) => t.trim())
+					.filter(Boolean),
+				notes: String(fields.get("notes") || ""),
+				customFields: Object.fromEntries(
+					customFields
+						.filter(([key]) => key.trim())
+						.map(([key, value]) => [key.trim(), value]),
+				),
+			};
+			const saved = contact
+				? await update.mutateAsync({ id: contact.id, data: input })
+				: await create.mutateAsync(input);
+			await navigate(`crm/contacts/${saved.id}`);
+		});
+	};
+	return (
+		<CrmPage title={contact ? "Edit contact" : "New contact"}>
+			<Feedback {...action} />
+			<form
+				method="post"
+				data-hydrated={hydrated}
+				className="max-w-3xl space-y-6"
+				onSubmit={save}
+			>
+				<fieldset disabled={!hydrated} className="space-y-6">
+					<div className="grid gap-4 sm:grid-cols-2">
+						{(
+							[
+								["firstName", "First name"],
+								["lastName", "Last name"],
+								["email", "Email"],
+								["phone", "Phone"],
+								["title", "Job title"],
+							] as const
+						).map(([name, label]) => (
+							<Field key={name} label={label}>
+								{(id) => (
+									<Input
+										id={id}
+										name={name}
+										type={
+											name === "email"
+												? "email"
+												: name === "phone"
+													? "tel"
+													: "text"
+										}
+										required={name === "firstName"}
+										maxLength={name === "email" ? 320 : 500}
+										defaultValue={contact?.[name] ?? ""}
+									/>
+								)}
+							</Field>
+						))}
+						<CompanyRelationFields value={contact?.companyId ?? ""} />
+						<Field
+							label="Company name"
+							hint="Use a name without linking a company record."
+						>
+							{(id) => (
+								<Input
+									id={id}
+									name="company"
+									maxLength={500}
+									defaultValue={contact?.company ?? ""}
+								/>
+							)}
+						</Field>
+						<Field label="Tags" hint="Separate tags with commas.">
+							{(id) => (
+								<Input
+									id={id}
+									name="tags"
+									defaultValue={contact?.tags.join(", ")}
+								/>
+							)}
+						</Field>
+					</div>
+					<Field label="Notes">
+						{(id) => (
+							<Textarea
+								id={id}
+								name="notes"
+								rows={5}
+								maxLength={20000}
+								defaultValue={contact?.notes ?? ""}
+							/>
+						)}
+					</Field>
+					<fieldset className="space-y-3">
+						<legend className="mb-3 text-sm font-medium">Custom fields</legend>
+						{customFields.map(([key, value], index) => (
+							<div
+								key={index}
+								className="grid items-end gap-3 sm:grid-cols-[1fr_2fr_auto]"
+							>
+								<Field label={`Field name ${index + 1}`}>
+									{(id) => (
+										<Input
+											id={id}
+											value={key}
+											maxLength={100}
+											required
+											onChange={(e) =>
+												setCustomFields((rows) =>
+													rows.map((row, i) =>
+														i === index ? [e.target.value, row[1]!] : row,
+													),
+												)
+											}
+										/>
+									)}
+								</Field>
+								<Field label={`Field value ${index + 1}`}>
+									{(id) => (
+										<Input
+											id={id}
+											value={value}
+											maxLength={2000}
+											onChange={(e) =>
+												setCustomFields((rows) =>
+													rows.map((row, i) =>
+														i === index ? [row[0]!, e.target.value] : row,
+													),
+												)
+											}
+										/>
+									)}
+								</Field>
+								<Button
+									type="button"
+									className="min-h-11"
+									variant="outline"
+									onClick={() =>
+										setCustomFields((rows) =>
+											rows.filter((_, i) => i !== index),
+										)
+									}
+								>
+									Remove field {index + 1}
+								</Button>
+							</div>
+						))}
+						<Button
+							type="button"
+							variant="outline"
+							className="min-h-11"
+							disabled={customFields.length >= 100}
+							onClick={() => setCustomFields((rows) => [...rows, ["", ""]])}
+						>
+							Add custom field
+						</Button>
+					</fieldset>
+					<div className="flex gap-3">
+						<Button
+							type="submit"
+							className="min-h-11"
+							disabled={!hydrated || create.isPending || update.isPending}
+						>
+							Save contact
+						</Button>
+						<Button asChild variant="outline" className="min-h-11">
+							<Link
+								href={
+									resolve(
+										contact ? `crm/contacts/${contact.id}` : "crm/contacts",
+									).href
+								}
+							>
+								Cancel
+							</Link>
+						</Button>
+					</div>
+				</fieldset>
+			</form>
+		</CrmPage>
+	);
+}

package/src/plugins/crm/client/components/pages/pipeline-page.internal.tsx

@@ -0,0 +1,213 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { GripVertical } from "lucide-react";
+import { PermissionAccess, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import * as Kanban from "@workspace/ui/components/kanban";
+import { KanbanBoard } from "@btst/stack/plugins/kanban/client/components";
+import type { Pipeline } from "../../../types";
+type SerializedTask = Pipeline["columns"][number]["tasks"][number];
+import { usePipeline, useMoveDeal } from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { CrmPage, Feedback, money, useCrmAction } from "../shared";
+import { DealForm } from "../deal-form";
+export function PipelinePage({ pipelineId }: { pipelineId: string }) {
+	const { data: pipeline, refetch } = usePipeline(pipelineId);
+	const move = useMoveDeal();
+	const [adding, setAdding] = useState<string>();
+	const { Link, resolve } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const action = useCrmAction();
+	const dealMap = new Map(pipeline.deals.map((deal) => [deal.taskId, deal]));
+	const source = Object.fromEntries(
+		pipeline.columns.map((column) => [
+			column.id,
+			column.tasks.filter((task) => dealMap.has(task.id)),
+		]),
+	);
+	const [state, setState] = useState(source);
+	const stateRef = useRef(state);
+	const busy = useRef(false);
+	useEffect(() => {
+		const next = Object.fromEntries(
+			pipeline.columns.map((column) => [
+				column.id,
+				column.tasks.filter((task) =>
+					pipeline.deals.some((deal) => deal.taskId === task.id),
+				),
+			]),
+		);
+		stateRef.current = next;
+		setState(next);
+	}, [pipeline]);
+	const change = (next: Record<string, SerializedTask[]>) => {
+		stateRef.current = next;
+		setState(next);
+	};
+	const persist = () => {
+		queueMicrotask(() => {
+			const next = stateRef.current;
+			if (busy.current) return;
+			const changes = Object.entries(next).flatMap(([stage, tasks]) =>
+				tasks.flatMap((task, index) => {
+					const deal = dealMap.get(task.id);
+					const original = source[stage]?.findIndex((t) => t.id === task.id);
+					return deal && (deal.stage !== stage || original !== index)
+						? [{ id: deal.id, stage, order: index }]
+						: [];
+				}),
+			);
+			if (!changes.length) return;
+			busy.current = true;
+			void action.run(async () => {
+				try {
+					for (const change of changes) await move.mutateAsync(change);
+				} finally {
+					busy.current = false;
+					await refetch();
+				}
+			}, "Deal stage updated");
+		});
+	};
+	return (
+		<CrmPage
+			title={pipeline.name}
+			description="Move deals between stages by dragging their handles, or choose a stage from a deal's detail page."
+			action={
+				<PermissionAccess
+					permission={crmPermissions.deal.create({
+						pipelineId,
+						stage: pipeline.columns[0]?.id ?? "",
+						contactId: null,
+						companyId: null,
+					})}
+				>
+					<Button
+						className="min-h-11"
+						onClick={() => setAdding(pipeline.columns[0]?.id)}
+					>
+						New deal
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<Feedback {...action} />
+			{adding && (
+				<DealForm
+					pipeline={pipeline}
+					stage={adding}
+					onSaved={() => setAdding(undefined)}
+					onCancel={() => setAdding(undefined)}
+				/>
+			)}
+			<KanbanBoard
+				boardId={pipeline.id}
+				columns={pipeline.columns}
+				kanbanState={state}
+				onKanbanChange={change}
+				onDragEnd={persist}
+				onDragCancel={() => {
+					stateRef.current = source;
+					setState(source);
+				}}
+				onAddTask={setAdding}
+				onEditTask={() => {}}
+				onEditColumn={() => {}}
+				onDeleteColumn={() => {}}
+				renderColumn={(column) => (
+					<Kanban.Column
+						value={column.id}
+						className="bg-muted/40 dark:bg-muted/40"
+					>
+						<div className="flex items-baseline justify-between gap-3 px-1 py-2">
+							<h2 className="font-semibold">{column.title}</h2>
+							<span className="text-sm text-muted-foreground">
+								{column.tasks.length}
+							</span>
+						</div>
+						<div className="space-y-3">
+							{column.tasks.map((task) => {
+								const deal = dealMap.get(task.id);
+								if (!deal) return null;
+								const facts = {
+									id: deal.id,
+									pipelineId,
+									contactId: deal.contactId ?? null,
+									companyId: deal.companyId ?? null,
+								};
+								return (
+									<Kanban.Item key={task.id} value={task.id} asChild>
+										<article className="space-y-3 rounded-md border bg-card p-3">
+											<div className="flex items-start gap-2">
+												<PermissionAccess
+													permission={crmPermissions.deal.move({
+														...facts,
+														targetStage: column.id,
+													})}
+												>
+													<Kanban.ItemHandle asChild disabled={move.isPending}>
+														<Button
+															variant="ghost"
+															className="min-h-11 min-w-11 shrink-0"
+															disabled={move.isPending}
+															aria-label={`Move deal ${deal.title}`}
+														>
+															<GripVertical className="size-4" />
+														</Button>
+													</Kanban.ItemHandle>
+												</PermissionAccess>
+												<Link
+													href={resolve(`crm/deals/${deal.id}`).href}
+													className="inline-flex min-h-11 items-center break-words font-medium hover:underline"
+												>
+													{deal.title}
+												</Link>
+											</div>
+											<div className="flex flex-wrap items-center justify-between gap-2 text-sm">
+												<span className="font-medium tabular-nums">
+													{money(deal.value, deal.currency)}
+												</span>
+												<span className="text-muted-foreground capitalize">
+													{deal.status}
+												</span>
+											</div>
+											{deal.closeDate && (
+												<p className="text-xs text-muted-foreground">
+													Closes{" "}
+													<time dateTime={deal.closeDate}>
+														{new Date(deal.closeDate).toLocaleDateString()}
+													</time>
+												</p>
+											)}
+										</article>
+									</Kanban.Item>
+								);
+							})}
+						</div>
+						{!column.tasks.length && (
+							<p className="py-6 text-center text-sm text-muted-foreground">
+								No deals in this stage.
+							</p>
+						)}
+						<PermissionAccess
+							permission={crmPermissions.deal.create({
+								pipelineId,
+								stage: column.id,
+								contactId: null,
+								companyId: null,
+							})}
+						>
+							<Button
+								variant="ghost"
+								className="min-h-11 w-full"
+								onClick={() => setAdding(column.id)}
+							>
+								Add deal to {column.title}
+							</Button>
+						</PermissionAccess>
+					</Kanban.Column>
+				)}
+			/>
+		</CrmPage>
+	);
+}

package/src/plugins/crm/client/components/pages/pipelines-page.internal.tsx

@@ -0,0 +1,107 @@
+"use client";
+import { useState, type FormEvent } from "react";
+import { PermissionAccess, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { usePipelines, useCreatePipeline } from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { CrmPage, Field, Feedback, useCrmAction } from "../shared";
+export function PipelinesPage() {
+	const { data } = usePipelines({ limit: 200 });
+	const create = useCreatePipeline();
+	const [creating, setCreating] = useState(false);
+	const { Link, resolve, navigate } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const action = useCrmAction();
+	const save = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const fields = new FormData(event.currentTarget);
+		void action.run(async () => {
+			const pipeline = await create.mutateAsync({
+				name: String(fields.get("name")),
+				stages: String(fields.get("stages"))
+					.split(",")
+					.map((s) => s.trim())
+					.filter(Boolean),
+			});
+			await navigate(`crm/pipeline/${pipeline.id}`);
+		});
+	};
+	return (
+		<CrmPage
+			title="Pipelines"
+			description="Follow each deal from its first conversation to a decision."
+			action={
+				<PermissionAccess permission={crmPermissions.pipeline.create()}>
+					<Button className="min-h-11" onClick={() => setCreating(!creating)}>
+						New pipeline
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<Feedback {...action} />
+			{creating && (
+				<form
+					className="max-w-2xl space-y-4 rounded-lg border p-5"
+					onSubmit={save}
+				>
+					<Field label="Pipeline name">
+						{(id) => <Input id={id} name="name" required maxLength={500} />}
+					</Field>
+					<Field
+						label="Stages"
+						hint="Separate stages with commas, in progression order."
+					>
+						{(id) => (
+							<Input
+								id={id}
+								name="stages"
+								required
+								defaultValue="Lead, Qualified, Proposal, Closed"
+							/>
+						)}
+					</Field>
+					<div className="flex gap-3">
+						<Button
+							type="submit"
+							className="min-h-11"
+							disabled={create.isPending}
+						>
+							Create pipeline
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							className="min-h-11"
+							onClick={() => setCreating(false)}
+						>
+							Cancel
+						</Button>
+					</div>
+				</form>
+			)}
+			{data.items.length ? (
+				<ul className="divide-y rounded-lg border px-5">
+					{data.items.map((pipeline) => (
+						<li key={pipeline.id} className="py-5">
+							<Link
+								className="inline-flex min-h-11 items-center text-lg font-semibold hover:underline"
+								href={resolve(`crm/pipeline/${pipeline.id}`).href}
+							>
+								{pipeline.name}
+							</Link>
+							<p className="text-sm text-muted-foreground">
+								{pipeline.columns.map((column) => column.title).join(" / ")}
+							</p>
+						</li>
+					))}
+				</ul>
+			) : (
+				<p className="py-10 text-muted-foreground">
+					No pipelines yet. Create a pipeline and choose the stages your deals
+					move through.
+				</p>
+			)}
+		</CrmPage>
+	);
+}

package/src/plugins/crm/client/components/pages.tsx

@@ -0,0 +1,159 @@
+"use client";
+import { lazy } from "react";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
+import { crmPermissions } from "../../permissions";
+import { CrmError, CrmLoading, CrmNotFound } from "./shared";
+const Contacts = lazy(() =>
+	import("./pages/contacts-page.internal").then((m) => ({
+		default: m.ContactsPage,
+	})),
+);
+const ContactDetail = lazy(() =>
+	import("./pages/contact-detail-page.internal").then((m) => ({
+		default: m.ContactDetailPage,
+	})),
+);
+const EditContact = lazy(() =>
+	import("./pages/edit-contact-page.internal").then((m) => ({
+		default: m.EditContactPage,
+	})),
+);
+const Pipeline = lazy(() =>
+	import("./pages/pipeline-page.internal").then((m) => ({
+		default: m.PipelinePage,
+	})),
+);
+const DealDetail = lazy(() =>
+	import("./pages/deal-detail-page.internal").then((m) => ({
+		default: m.DealDetailPage,
+	})),
+);
+const Companies = lazy(() =>
+	import("./pages/companies-page.internal").then((m) => ({
+		default: m.CompaniesPage,
+	})),
+);
+const Pipelines = lazy(() =>
+	import("./pages/pipelines-page.internal").then((m) => ({
+		default: m.PipelinesPage,
+	})),
+);
+
+function ReadablePipeline({ pipelineId }: { pipelineId: string }) {
+	return (
+		<PermissionRouteAccess
+			permission={crmPermissions.deal.read()}
+			LoadingComponent={CrmLoading}
+		>
+			<Pipeline pipelineId={pipelineId} />
+		</PermissionRouteAccess>
+	);
+}
+function ReadablePipelines() {
+	return (
+		<PermissionRouteAccess
+			permission={crmPermissions.deal.read()}
+			LoadingComponent={CrmLoading}
+		>
+			<Pipelines />
+		</PermissionRouteAccess>
+	);
+}
+function ReadableDeal({ id }: { id: string }) {
+	return (
+		<PermissionRouteAccess
+			permission={crmPermissions.pipeline.read()}
+			LoadingComponent={CrmLoading}
+		>
+			<DealDetail id={id} />
+		</PermissionRouteAccess>
+	);
+}
+
+const boundary = {
+	onError: (error: Error) => console.error("[btst/crm]", error),
+	ErrorComponent: CrmError,
+	LoadingComponent: CrmLoading,
+	NotFoundComponent: CrmNotFound,
+};
+export function ContactsPageComponent() {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path="/crm/contacts"
+			permission={crmPermissions.contact.read()}
+			PageComponent={Contacts}
+		/>
+	);
+}
+export function CompaniesPageComponent() {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path="/crm/companies"
+			permission={crmPermissions.company.read()}
+			PageComponent={Companies}
+		/>
+	);
+}
+export function PipelinesPageComponent() {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path="/crm/pipelines"
+			permission={crmPermissions.pipeline.read()}
+			PageComponent={ReadablePipelines}
+		/>
+	);
+}
+export function ContactDetailPageComponent({ id }: { id: string }) {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path={`/crm/contacts/${id}`}
+			permission={crmPermissions.contact.read()}
+			PageComponent={ContactDetail}
+			props={{ id }}
+		/>
+	);
+}
+export function EditContactPageComponent({ id }: { id?: string }) {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path={id ? `/crm/contacts/${id}/edit` : "/crm/contacts/new"}
+			permission={
+				id
+					? crmPermissions.contact.update({ id })
+					: crmPermissions.contact.create()
+			}
+			PageComponent={EditContact}
+			props={{ id }}
+		/>
+	);
+}
+export function PipelinePageComponent({ pipelineId }: { pipelineId: string }) {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path={`/crm/pipeline/${pipelineId}`}
+			permission={crmPermissions.pipeline.read()}
+			PageComponent={ReadablePipeline}
+			props={{ pipelineId }}
+		/>
+	);
+}
+export function DealDetailPageComponent({ id }: { id: string }) {
+	return (
+		<ComposedRoute
+			{...boundary}
+			path={`/crm/deals/${id}`}
+			permission={crmPermissions.deal.read()}
+			PageComponent={ReadableDeal}
+			props={{ id }}
+		/>
+	);
+}