@btst/stack 5.1.0 → 5.2.0

package/src/plugins/crm/api/plugin.ts

@@ -0,0 +1,213 @@
+import { createEndpoint, defineBackendPlugin } from "@btst/stack/plugins/api";
+import { crmSchema } from "../db";
+import * as schemas from "../schemas";
+import type { CrmPluginHooks } from "../types";
+import { createCrmOperations } from "./operations";
+/** CRM lifecycle configuration. Shared API and authorization settings belong to the stack. */
+export interface CrmBackendOptions {
+	/** Post-authorization lifecycle hooks and follow-up notification delivery. */ hooks?: CrmPluginHooks;
+}
+/** Private contacts, Kanban-backed deals and activity tracking. Requires the Kanban backend plugin. */
+export const crmBackendPlugin = (options: CrmBackendOptions = {}) =>
+	defineBackendPlugin({
+		id: "crm",
+		dbPlugin: crmSchema,
+		operations: (adapter, context) => {
+			if (!context?.auth) throw new Error("CRM requires stack authorization");
+			if (
+				!Object.values(context?.plugins ?? {}).some(
+					(plugin) => plugin.id === "kanban",
+				)
+			)
+				throw new Error("CRM requires the Kanban backend plugin");
+			return createCrmOperations(adapter, options.hooks);
+		},
+		routes: (_adapter, _context, operations) => ({
+			listContacts: createEndpoint(
+				"/crm/contacts",
+				{
+					method: "GET",
+					query: schemas.listContactsSchema,
+					requireRequest: true,
+				},
+				operations.listContacts.route((ctx) => ctx.query),
+			),
+			getContactById: createEndpoint(
+				"/crm/contacts/:id",
+				{ method: "GET", requireRequest: true },
+				operations.getContactById.route((ctx) => ({ id: ctx.params.id })),
+			),
+			createContact: createEndpoint(
+				"/crm/contacts",
+				{
+					method: "POST",
+					body: schemas.createContactSchema,
+					requireRequest: true,
+				},
+				operations.createContact.route((ctx) => ctx.body),
+			),
+			updateContact: createEndpoint(
+				"/crm/contacts/:id",
+				{
+					method: "PUT",
+					body: schemas.updateContactSchema,
+					requireRequest: true,
+				},
+				operations.updateContact.route((ctx) => ({
+					id: ctx.params.id,
+					data: ctx.body,
+				})),
+			),
+			deleteContact: createEndpoint(
+				"/crm/contacts/:id",
+				{ method: "DELETE", requireRequest: true },
+				operations.deleteContact.route((ctx) => ({ id: ctx.params.id })),
+			),
+			listCompanies: createEndpoint(
+				"/crm/companies",
+				{
+					method: "GET",
+					query: schemas.listCompaniesSchema,
+					requireRequest: true,
+				},
+				operations.listCompanies.route((ctx) => ctx.query),
+			),
+			getCompanyById: createEndpoint(
+				"/crm/companies/:id",
+				{ method: "GET", requireRequest: true },
+				operations.getCompanyById.route((ctx) => ({ id: ctx.params.id })),
+			),
+			createCompany: createEndpoint(
+				"/crm/companies",
+				{
+					method: "POST",
+					body: schemas.createCompanySchema,
+					requireRequest: true,
+				},
+				operations.createCompany.route((ctx) => ctx.body),
+			),
+			updateCompany: createEndpoint(
+				"/crm/companies/:id",
+				{
+					method: "PUT",
+					body: schemas.updateCompanySchema,
+					requireRequest: true,
+				},
+				operations.updateCompany.route((ctx) => ({
+					id: ctx.params.id,
+					data: ctx.body,
+				})),
+			),
+			deleteCompany: createEndpoint(
+				"/crm/companies/:id",
+				{ method: "DELETE", requireRequest: true },
+				operations.deleteCompany.route((ctx) => ({ id: ctx.params.id })),
+			),
+			listDeals: createEndpoint(
+				"/crm/deals",
+				{ method: "GET", query: schemas.listDealsSchema, requireRequest: true },
+				operations.listDeals.route((ctx) => ctx.query),
+			),
+			getDealById: createEndpoint(
+				"/crm/deals/:id",
+				{ method: "GET", requireRequest: true },
+				operations.getDealById.route((ctx) => ({ id: ctx.params.id })),
+			),
+			createDeal: createEndpoint(
+				"/crm/deals",
+				{
+					method: "POST",
+					body: schemas.createDealSchema,
+					requireRequest: true,
+				},
+				operations.createDeal.route((ctx) => ctx.body),
+			),
+			updateDeal: createEndpoint(
+				"/crm/deals/:id",
+				{ method: "PUT", body: schemas.updateDealSchema, requireRequest: true },
+				operations.updateDeal.route((ctx) => ({
+					id: ctx.params.id,
+					data: ctx.body,
+				})),
+			),
+			deleteDeal: createEndpoint(
+				"/crm/deals/:id",
+				{ method: "DELETE", requireRequest: true },
+				operations.deleteDeal.route((ctx) => ({ id: ctx.params.id })),
+			),
+			listPipelines: createEndpoint(
+				"/crm/pipelines",
+				{
+					method: "GET",
+					query: schemas.paginationSchema,
+					requireRequest: true,
+				},
+				operations.listPipelines.route((ctx) => ctx.query),
+			),
+			getPipeline: createEndpoint(
+				"/crm/pipelines/:id",
+				{ method: "GET", requireRequest: true },
+				operations.getPipeline.route((ctx) => ({ id: ctx.params.id })),
+			),
+			createPipeline: createEndpoint(
+				"/crm/pipelines",
+				{
+					method: "POST",
+					body: schemas.createPipelineSchema,
+					requireRequest: true,
+				},
+				operations.createPipeline.route((ctx) => ctx.body),
+			),
+			moveDeal: createEndpoint(
+				"/crm/deals/:id/move",
+				{ method: "POST", body: schemas.moveDealSchema, requireRequest: true },
+				operations.moveDeal.route((ctx) => ({
+					id: ctx.params.id,
+					...ctx.body,
+				})),
+			),
+			listActivities: createEndpoint(
+				"/crm/activities",
+				{
+					method: "GET",
+					query: schemas.listActivitiesSchema,
+					requireRequest: true,
+				},
+				operations.listActivities.route((ctx) => ctx.query),
+			),
+			logActivity: createEndpoint(
+				"/crm/activities",
+				{
+					method: "POST",
+					body: schemas.createActivitySchema,
+					requireRequest: true,
+				},
+				operations.logActivity.route((ctx) => ctx.body),
+			),
+			updateActivity: createEndpoint(
+				"/crm/activities/:id",
+				{
+					method: "PUT",
+					body: schemas.updateActivitySchema,
+					requireRequest: true,
+				},
+				operations.updateActivity.route((ctx) => ({
+					id: ctx.params.id,
+					data: ctx.body,
+				})),
+			),
+			deleteActivity: createEndpoint(
+				"/crm/activities/:id",
+				{ method: "DELETE", requireRequest: true },
+				operations.deleteActivity.route((ctx) => ({ id: ctx.params.id })),
+			),
+			sendDueReminders: createEndpoint(
+				"/crm/reminders/send",
+				{ method: "POST", requireRequest: true },
+				operations.sendDueReminders.route(() => ({})),
+			),
+		}),
+	});
+export type CrmApiRouter = ReturnType<
+	ReturnType<typeof crmBackendPlugin>["routes"]
+>;

package/src/plugins/crm/api/serializers.ts

@@ -0,0 +1,37 @@
+import type {
+	ContactRecord,
+	CompanyRecord,
+	ActivityRecord,
+	Contact,
+	Company,
+	Activity,
+} from "../types";
+const iso = (date: Date | string) => new Date(date).toISOString();
+/** Serialize JSON fields and dates at the API boundary. */
+export function serializeContact(row: ContactRecord): Contact {
+	return {
+		...row,
+		tags: JSON.parse(row.tags || "[]"),
+		customFields: JSON.parse(row.customFields || "{}"),
+		createdAt: iso(row.createdAt),
+		updatedAt: iso(row.updatedAt),
+	};
+}
+/** Serialize company dates. */
+export function serializeCompany(row: CompanyRecord): Company {
+	return {
+		...row,
+		createdAt: iso(row.createdAt),
+		updatedAt: iso(row.updatedAt),
+	};
+}
+/** Serialize follow-up dates. */
+export function serializeActivity(row: ActivityRecord): Activity {
+	return {
+		...row,
+		dueAt: row.dueAt ? iso(row.dueAt) : null,
+		completedAt: row.completedAt ? iso(row.completedAt) : null,
+		remindedAt: row.remindedAt ? iso(row.remindedAt) : null,
+		createdAt: iso(row.createdAt),
+	};
+}

package/src/plugins/crm/client/components/activity-timeline.tsx

@@ -0,0 +1,234 @@
+"use client";
+import { useState, type FormEvent } from "react";
+import { PermissionAccess } from "@btst/stack/context";
+import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Textarea } from "@workspace/ui/components/textarea";
+import {
+	useActivities,
+	useCreateActivity,
+	useUpdateActivity,
+	useDeleteActivity,
+} from "../hooks";
+import { crmPermissions } from "../../permissions";
+import type { ActivityInput } from "@btst/stack/plugins/crm/query-keys";
+import {
+	Field,
+	Feedback,
+	DeleteRecord,
+	Pagination,
+	selectClass,
+	useCrmAction,
+} from "./shared";
+
+export function ActivityTimeline({
+	contactId,
+	dealId,
+	description,
+}: {
+	contactId?: string;
+	dealId?: string;
+	description: string;
+}) {
+	const [offset, setOffset] = useState(0);
+	const { data } = useActivities({ contactId, dealId, limit: 25, offset });
+	const create = useCreateActivity();
+	const update = useUpdateActivity();
+	const remove = useDeleteActivity();
+	const [logging, setLogging] = useState(false);
+	const action = useCrmAction();
+	useRegisterPageAIContext({
+		routeName: contactId ? "crm-contact-detail" : "crm-deal-detail",
+		pageDescription:
+			`${description}\nRecent activities:\n${data.items.map((a) => `${a.type}: ${a.body}${a.dueAt ? ` Follow-up due ${a.dueAt}` : ""}`).join("\n")}`.slice(
+				0,
+				16000,
+			),
+		suggestions: [
+			"Summarize this relationship's history",
+			"Draft a follow-up email",
+			"Log a call note",
+		],
+		clientTools: {
+			logCrmActivity: async (input: ActivityInput) => {
+				await create.mutateAsync({ ...input, contactId, dealId });
+				return { success: true, message: "Activity saved" };
+			},
+		},
+	});
+	const save = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const form = event.currentTarget;
+		const fields = new FormData(form);
+		const due = String(fields.get("dueAt") || "");
+		void action.run(async () => {
+			await create.mutateAsync({
+				type: String(fields.get("type")) as ActivityInput["type"],
+				body: String(fields.get("body")),
+				contactId,
+				dealId,
+				dueAt: due ? new Date(due).toISOString() : null,
+			});
+			form.reset();
+			setLogging(false);
+		}, "Activity saved");
+	};
+	return (
+		<section className="min-w-0 space-y-5" aria-label="Activity timeline">
+			<div className="flex flex-wrap items-center justify-between gap-3">
+				<h2 className="text-xl font-semibold">Activity timeline</h2>
+				<PermissionAccess
+					permission={crmPermissions.activity.create({
+						contactId: contactId ?? null,
+						dealId: dealId ?? null,
+					})}
+				>
+					<Button
+						className="min-h-11"
+						variant="outline"
+						onClick={() => setLogging(!logging)}
+					>
+						Log activity
+					</Button>
+				</PermissionAccess>
+			</div>
+			<Feedback {...action} />
+			{logging && (
+				<form className="space-y-4 rounded-lg border p-4" onSubmit={save}>
+					<div className="grid gap-4 sm:grid-cols-2">
+						<Field label="Type">
+							{(id) => (
+								<select id={id} name="type" className={selectClass}>
+									<option value="note">Note</option>
+									<option value="call">Call</option>
+									<option value="email">Email</option>
+									<option value="meeting">Meeting</option>
+								</select>
+							)}
+						</Field>
+						<Field label="Follow-up due">
+							{(id) => <Input id={id} name="dueAt" type="datetime-local" />}
+						</Field>
+					</div>
+					<Field label="Activity details">
+						{(id) => (
+							<Textarea
+								id={id}
+								name="body"
+								required
+								maxLength={20000}
+								rows={4}
+							/>
+						)}
+					</Field>
+					<div className="flex gap-3">
+						<Button
+							type="submit"
+							className="min-h-11"
+							disabled={create.isPending}
+						>
+							Save activity
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							className="min-h-11"
+							onClick={() => setLogging(false)}
+						>
+							Cancel
+						</Button>
+					</div>
+				</form>
+			)}
+			{data.items.length ? (
+				<ol className="divide-y">
+					{data.items.map((activity) => (
+						<li key={activity.id} className="space-y-3 py-5">
+							<div className="flex flex-wrap items-baseline justify-between gap-2">
+								<h3 className="font-medium capitalize">{activity.type}</h3>
+								<time
+									className="text-sm text-muted-foreground"
+									dateTime={activity.createdAt}
+								>
+									{new Date(activity.createdAt).toLocaleString()}
+								</time>
+							</div>
+							<p className="whitespace-pre-wrap break-words text-sm leading-6">
+								{activity.body}
+							</p>
+							{activity.dueAt && (
+								<p className="text-sm">
+									{activity.completedAt ? "Completed" : "Follow-up due"}:{" "}
+									<time dateTime={activity.completedAt ?? activity.dueAt}>
+										{new Date(
+											activity.completedAt ?? activity.dueAt,
+										).toLocaleString()}
+									</time>
+								</p>
+							)}
+							<div className="flex flex-wrap gap-2">
+								{activity.dueAt && (
+									<PermissionAccess
+										permission={crmPermissions.activity.update({
+											id: activity.id,
+										})}
+									>
+										<Button
+											variant="outline"
+											className="min-h-11"
+											disabled={update.isPending}
+											onClick={() =>
+												void action.run(
+													async () => {
+														await update.mutateAsync({
+															id: activity.id,
+															data: {
+																completedAt: activity.completedAt
+																	? null
+																	: new Date().toISOString(),
+															},
+														});
+													},
+													activity.completedAt
+														? "Follow-up reopened"
+														: "Follow-up completed",
+												)
+											}
+										>
+											{activity.completedAt
+												? "Reopen follow-up"
+												: "Complete follow-up"}
+										</Button>
+									</PermissionAccess>
+								)}
+								<PermissionAccess
+									permission={crmPermissions.activity.delete({
+										id: activity.id,
+									})}
+								>
+									<DeleteRecord
+										label="Delete activity"
+										description="This activity will be removed from the timeline."
+										pending={remove.isPending}
+										onDelete={() =>
+											void action.run(async () => {
+												await remove.mutateAsync(activity.id);
+											}, "Activity deleted")
+										}
+									/>
+								</PermissionAccess>
+							</div>
+						</li>
+					))}
+				</ol>
+			) : (
+				<p className="py-6 text-muted-foreground">
+					No activities yet. Log a note, call, email, or meeting to start the
+					timeline.
+				</p>
+			)}
+			<Pagination offset={offset} total={data.total} onChange={setOffset} />
+		</section>
+	);
+}

package/src/plugins/crm/client/components/deal-form.tsx

@@ -0,0 +1,159 @@
+"use client";
+import type { FormEvent } from "react";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { useCreateDeal, useUpdateDeal } from "../hooks";
+import type { Deal, Pipeline } from "../../types";
+import type { DealInput } from "@btst/stack/plugins/crm/query-keys";
+import {
+	CompanyRelationFields,
+	ContactRelationFields,
+} from "./relation-options";
+import { Field, Feedback, selectClass, useCrmAction } from "./shared";
+export function DealForm({
+	pipeline,
+	stage,
+	deal,
+	onSaved,
+	onCancel,
+}: {
+	pipeline: Pipeline;
+	stage?: string;
+	deal?: Deal;
+	onSaved: (deal: Deal) => void | Promise<void>;
+	onCancel: () => void;
+}) {
+	const create = useCreateDeal();
+	const update = useUpdateDeal();
+	const action = useCrmAction();
+	const save = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const fields = new FormData(event.currentTarget);
+		void action.run(async () => {
+			const value = String(fields.get("value") || "");
+			const date = String(fields.get("closeDate") || "");
+			const input: Omit<DealInput, "pipelineId" | "stage"> = {
+				title: String(fields.get("title")),
+				value: value ? Number(value) : null,
+				currency: String(fields.get("currency")).toUpperCase(),
+				contactId: String(fields.get("contactId") || "") || null,
+				companyId: String(fields.get("companyId") || "") || null,
+				closeDate: date ? new Date(`${date}T12:00:00Z`).toISOString() : null,
+				status: String(fields.get("status") || "open") as DealInput["status"],
+			};
+			const saved = deal
+				? await update.mutateAsync({ id: deal.id, data: input })
+				: await create.mutateAsync({
+						...input,
+						pipelineId: pipeline.id,
+						stage: String(fields.get("stage")),
+					});
+			await onSaved(saved);
+		});
+	};
+	return (
+		<form className="max-w-3xl space-y-4 rounded-lg border p-5" onSubmit={save}>
+			<h2 className="text-xl font-medium">{deal ? "Edit deal" : "New deal"}</h2>
+			<Feedback {...action} />
+			<div className="grid gap-4 sm:grid-cols-2">
+				<Field label="Deal title">
+					{(id) => (
+						<Input
+							id={id}
+							name="title"
+							required
+							maxLength={500}
+							defaultValue={deal?.title}
+						/>
+					)}
+				</Field>
+				<Field label="Value">
+					{(id) => (
+						<Input
+							id={id}
+							name="value"
+							type="number"
+							min={0}
+							step="any"
+							defaultValue={deal?.value ?? ""}
+						/>
+					)}
+				</Field>
+				<Field label="Currency">
+					{(id) => (
+						<Input
+							id={id}
+							name="currency"
+							required
+							pattern="[A-Za-z]{3}"
+							maxLength={3}
+							defaultValue={deal?.currency ?? "USD"}
+						/>
+					)}
+				</Field>
+				<Field label="Close date">
+					{(id) => (
+						<Input
+							id={id}
+							name="closeDate"
+							type="date"
+							defaultValue={deal?.closeDate?.slice(0, 10) ?? ""}
+						/>
+					)}
+				</Field>
+				{!deal && (
+					<Field label="Stage">
+						{(id) => (
+							<select
+								id={id}
+								name="stage"
+								className={selectClass}
+								required
+								defaultValue={stage ?? pipeline.columns[0]?.id}
+							>
+								{pipeline.columns.map((column) => (
+									<option value={column.id} key={column.id}>
+										{column.title}
+									</option>
+								))}
+							</select>
+						)}
+					</Field>
+				)}
+				<Field label="Status">
+					{(id) => (
+						<select
+							id={id}
+							name="status"
+							className={selectClass}
+							defaultValue={deal?.status ?? "open"}
+						>
+							<option value="open">Open</option>
+							<option value="won">Won</option>
+							<option value="lost">Lost</option>
+						</select>
+					)}
+				</Field>
+				<ContactRelationFields value={deal?.contactId ?? ""} />
+				<CompanyRelationFields value={deal?.companyId ?? ""} />
+			</div>
+			<div className="flex gap-3">
+				<Button
+					type="submit"
+					className="min-h-11"
+					disabled={create.isPending || update.isPending}
+				>
+					Save deal
+				</Button>
+				<Button
+					type="button"
+					className="min-h-11"
+					variant="outline"
+					onClick={onCancel}
+				>
+					Cancel
+				</Button>
+			</div>
+		</form>
+	);
+}

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

@@ -0,0 +1,9 @@
+export {
+	ContactsPageComponent,
+	ContactDetailPageComponent,
+	EditContactPageComponent,
+	PipelinePageComponent,
+	DealDetailPageComponent,
+	CompaniesPageComponent,
+	PipelinesPageComponent,
+} from "./pages";