@btst/stack 5.1.0 → 5.2.0

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

@@ -0,0 +1,194 @@
+"use client";
+import { useState, type FormEvent } from "react";
+import { PermissionAccess } 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 type { Company } from "../../../types";
+import {
+	useCompanies,
+	useCreateCompany,
+	useUpdateCompany,
+	useDeleteCompany,
+} from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import {
+	CrmPage,
+	Field,
+	Feedback,
+	DeleteRecord,
+	Pagination,
+	useCrmAction,
+} from "../shared";
+export function CompaniesPage() {
+	const [search, setSearch] = useState("");
+	const [offset, setOffset] = useState(0);
+	const [editing, setEditing] = useState<Company | null | undefined>();
+	const { data } = useCompanies({
+		search: search || undefined,
+		limit: 25,
+		offset,
+	});
+	const create = useCreateCompany();
+	const update = useUpdateCompany();
+	const remove = useDeleteCompany();
+	const action = useCrmAction();
+	const save = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const fields = new FormData(event.currentTarget);
+		void action.run(async () => {
+			const input = {
+				name: String(fields.get("name")),
+				domain: String(fields.get("domain") || ""),
+				phone: String(fields.get("phone") || ""),
+				notes: String(fields.get("notes") || ""),
+			};
+			if (editing) await update.mutateAsync({ id: editing.id, data: input });
+			else await create.mutateAsync(input);
+			setEditing(undefined);
+		}, "Company saved");
+	};
+	return (
+		<CrmPage
+			title="Companies"
+			description="Link contacts and deals to the organizations you work with."
+			action={
+				<PermissionAccess permission={crmPermissions.company.create()}>
+					<Button className="min-h-11" onClick={() => setEditing(null)}>
+						New company
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<Feedback {...action} />
+			{editing !== undefined && (
+				<form
+					key={editing?.id ?? "new"}
+					className="max-w-3xl space-y-4 rounded-lg border p-5"
+					onSubmit={save}
+				>
+					<h2 className="text-xl font-medium">
+						{editing ? "Edit company" : "New company"}
+					</h2>
+					<div className="grid gap-4 sm:grid-cols-2">
+						{(
+							[
+								["name", "Company name"],
+								["domain", "Domain"],
+								["phone", "Phone"],
+							] as const
+						).map(([name, label]) => (
+							<Field key={name} label={label}>
+								{(id) => (
+									<Input
+										id={id}
+										name={name}
+										maxLength={500}
+										required={name === "name"}
+										defaultValue={editing?.[name] ?? ""}
+									/>
+								)}
+							</Field>
+						))}
+					</div>
+					<Field label="Notes">
+						{(id) => (
+							<Textarea
+								id={id}
+								name="notes"
+								rows={3}
+								maxLength={20000}
+								defaultValue={editing?.notes ?? ""}
+							/>
+						)}
+					</Field>
+					<div className="flex gap-3">
+						<Button
+							type="submit"
+							disabled={create.isPending || update.isPending}
+							className="min-h-11"
+						>
+							Save company
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							className="min-h-11"
+							onClick={() => setEditing(undefined)}
+						>
+							Cancel
+						</Button>
+					</div>
+				</form>
+			)}
+			<Field label="Search companies">
+				{(id) => (
+					<Input
+						id={id}
+						type="search"
+						value={search}
+						onChange={(e) => {
+							setSearch(e.target.value);
+							setOffset(0);
+						}}
+					/>
+				)}
+			</Field>
+			{data.items.length ? (
+				<ul className="divide-y rounded-lg border px-5">
+					{data.items.map((company) => (
+						<li
+							key={company.id}
+							className="flex flex-wrap items-center justify-between gap-4 py-5"
+						>
+							<div className="min-w-0">
+								<h2 className="break-words font-semibold">{company.name}</h2>
+								<p className="break-words text-sm text-muted-foreground">
+									{[company.domain, company.phone].filter(Boolean).join(" / ")}
+								</p>
+								{company.notes && (
+									<p className="mt-2 max-w-2xl whitespace-pre-wrap break-words text-sm">
+										{company.notes}
+									</p>
+								)}
+							</div>
+							<div className="flex gap-2">
+								<PermissionAccess
+									permission={crmPermissions.company.update({ id: company.id })}
+								>
+									<Button
+										variant="outline"
+										className="min-h-11"
+										onClick={() => setEditing(company)}
+										aria-label={`Edit ${company.name}`}
+									>
+										Edit company
+									</Button>
+								</PermissionAccess>
+								<PermissionAccess
+									permission={crmPermissions.company.delete({ id: company.id })}
+								>
+									<DeleteRecord
+										label="Delete company"
+										description={`${company.name} will be removed; linked records keep their other details.`}
+										pending={remove.isPending}
+										onDelete={() =>
+											void action.run(async () => {
+												await remove.mutateAsync(company.id);
+											}, "Company deleted")
+										}
+									/>
+								</PermissionAccess>
+							</div>
+						</li>
+					))}
+				</ul>
+			) : (
+				<p className="py-8 text-muted-foreground">
+					No companies match. Add a company or adjust your search.
+				</p>
+			)}
+			<Pagination offset={offset} total={data.total} onChange={setOffset} />
+		</CrmPage>
+	);
+}

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

@@ -0,0 +1,142 @@
+"use client";
+import { PermissionAccess, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import {
+	useContact,
+	useCompany,
+	useDeals,
+	useDeleteContact,
+} from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { ActivityTimeline } from "../activity-timeline";
+import {
+	CrmPage,
+	Feedback,
+	DeleteRecord,
+	fullName,
+	money,
+	useCrmAction,
+} from "../shared";
+function ContactCompany({ id }: { id: string }) {
+	const { data } = useCompany(id);
+	return (
+		<div>
+			<dt className="text-muted-foreground">Company</dt>
+			<dd className="mt-1 break-words">{data.name}</dd>
+		</div>
+	);
+}
+export function ContactDetailPage({ id }: { id: string }) {
+	const { data: contact } = useContact(id);
+	const { data: deals } = useDeals({ contactId: id, limit: 100 });
+	const remove = useDeleteContact();
+	const { Link, resolve, navigate } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const action = useCrmAction();
+	return (
+		<CrmPage
+			title={fullName(contact)}
+			description={[contact.title, contact.company]
+				.filter(Boolean)
+				.join(" at ")}
+			action={
+				<PermissionAccess permission={crmPermissions.contact.update({ id })}>
+					<Button asChild variant="outline" className="min-h-11">
+						<Link href={resolve(`crm/contacts/${id}/edit`).href}>
+							Edit contact
+						</Link>
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<Feedback {...action} />
+			<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
+				<aside className="min-w-0 space-y-6">
+					<section className="space-y-4 rounded-lg border p-5">
+						<h2 className="text-lg font-semibold">Contact details</h2>
+						<dl className="space-y-4 text-sm">
+							{(
+								[
+									["Email", contact.email],
+									["Phone", contact.phone],
+									["Company", contact.companyId ? null : contact.company],
+									["Job title", contact.title],
+									...Object.entries(contact.customFields),
+								] as [string, string | null | undefined][]
+							)
+								.filter(([, value]) => value)
+								.map(([label, value]) => (
+									<div key={label}>
+										<dt className="text-muted-foreground">{label}</dt>
+										<dd className="mt-1 break-words">{value}</dd>
+									</div>
+								))}
+							{contact.companyId && <ContactCompany id={contact.companyId} />}
+						</dl>
+						{contact.tags.length > 0 && (
+							<div className="flex flex-wrap gap-2">
+								{contact.tags.map((tag) => (
+									<span
+										key={tag}
+										className="rounded-sm bg-muted px-2 py-1 text-xs"
+									>
+										{tag}
+									</span>
+								))}
+							</div>
+						)}
+						{contact.notes && (
+							<div className="space-y-2 border-t pt-4">
+								<h3 className="text-sm font-medium">Notes</h3>
+								<p className="whitespace-pre-wrap break-words text-sm leading-6">
+									{contact.notes}
+								</p>
+							</div>
+						)}
+					</section>
+					<section className="space-y-3">
+						<h2 className="text-lg font-semibold">Deals</h2>
+						{deals.items.length ? (
+							<ul className="divide-y">
+								{deals.items.map((deal) => (
+									<li key={deal.id} className="py-3">
+										<Link
+											href={resolve(`crm/deals/${deal.id}`).href}
+											className="inline-flex min-h-11 items-center font-medium hover:underline"
+										>
+											{deal.title}
+										</Link>
+										<p className="text-sm text-muted-foreground">
+											{money(deal.value, deal.currency)} · {deal.status}
+										</p>
+									</li>
+								))}
+							</ul>
+						) : (
+							<p className="text-sm text-muted-foreground">
+								No deals linked to this contact.
+							</p>
+						)}
+					</section>
+					<PermissionAccess permission={crmPermissions.contact.delete({ id })}>
+						<DeleteRecord
+							label="Delete contact"
+							description="This contact will be removed. Existing deals remain in their pipelines."
+							pending={remove.isPending}
+							onDelete={() =>
+								void action.run(async () => {
+									await remove.mutateAsync(id);
+									await navigate("crm/contacts");
+								})
+							}
+						/>
+					</PermissionAccess>
+				</aside>
+				<ActivityTimeline
+					contactId={id}
+					description={`Contact: ${fullName(contact)}\n${JSON.stringify(contact)}\nDeals: ${JSON.stringify(deals.items)}`}
+				/>
+			</div>
+		</CrmPage>
+	);
+}

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

@@ -0,0 +1,150 @@
+"use client";
+import { useState } from "react";
+import { PermissionAccess, usePluginSiteNavigation } 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 { useContacts, useSearchContacts } from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { CrmPage, Field, Pagination, fullName } from "../shared";
+
+export function ContactsPage() {
+	const [search, setSearch] = useState("");
+	const [tag, setTag] = useState("");
+	const [offset, setOffset] = useState(0);
+	const { data } = useContacts({
+		search: search || undefined,
+		tag: tag || undefined,
+		limit: 25,
+		offset,
+	});
+	const { Link, resolve } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const searchContacts = useSearchContacts();
+	useRegisterPageAIContext({
+		routeName: "crm-contacts",
+		pageDescription:
+			`CRM contact register. Current results:\n${JSON.stringify(data.items)}`.slice(
+				0,
+				16000,
+			),
+		suggestions: ["Find a contact", "Which contacts should I follow up with?"],
+		clientTools: {
+			queryCrmContacts: async ({ search, tag }) => {
+				setSearch(search ?? "");
+				setTag(tag ?? "");
+				setOffset(0);
+				const results = await searchContacts({ search, tag, limit: 25 });
+				return {
+					success: true,
+					message: JSON.stringify(results),
+				};
+			},
+		},
+	});
+	return (
+		<CrmPage
+			title="Contacts"
+			description="Search contacts, link companies, and review their activities."
+			action={
+				<PermissionAccess permission={crmPermissions.contact.create()}>
+					<Button asChild className="min-h-11">
+						<Link href={resolve("crm/contacts/new").href}>New contact</Link>
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<div className="grid gap-4 sm:grid-cols-[2fr_1fr]">
+				<Field
+					label="Search contacts"
+					hint="Search any field, including notes and custom fields."
+				>
+					{(id) => (
+						<Input
+							id={id}
+							type="search"
+							value={search}
+							placeholder="Name, email, company, or any detail"
+							onChange={(e) => {
+								setSearch(e.target.value);
+								setOffset(0);
+							}}
+						/>
+					)}
+				</Field>
+				<Field label="Filter by tag">
+					{(id) => (
+						<Input
+							id={id}
+							value={tag}
+							placeholder="Any tag"
+							onChange={(e) => {
+								setTag(e.target.value);
+								setOffset(0);
+							}}
+						/>
+					)}
+				</Field>
+			</div>
+			{data.items.length ? (
+				<div
+					className="overflow-x-auto rounded-lg border focus-visible:outline-2 focus-visible:outline-ring"
+					tabIndex={0}
+					role="region"
+					aria-label="Contacts table"
+				>
+					<table className="min-w-[36rem] w-full text-left text-sm">
+						<caption className="sr-only">CRM contacts</caption>
+						<thead className="border-b bg-muted/40">
+							<tr>
+								<th className="p-4 font-medium">Contact</th>
+								<th className="p-4 font-medium">Company</th>
+								<th className="p-4 font-medium">Tags</th>
+							</tr>
+						</thead>
+						<tbody>
+							{data.items.map((contact) => (
+								<tr key={contact.id} className="border-b last:border-0">
+									<td className="p-4">
+										<Link
+											className="inline-flex min-h-11 items-center font-medium underline-offset-4 hover:underline"
+											href={resolve(`crm/contacts/${contact.id}`).href}
+										>
+											{fullName(contact)}
+										</Link>
+										<p className="break-all text-muted-foreground">
+											{contact.email || contact.phone || "No contact details"}
+										</p>
+									</td>
+									<td className="p-4">
+										{contact.company || "No company"}
+										{contact.title && (
+											<p className="text-muted-foreground">{contact.title}</p>
+										)}
+									</td>
+									<td className="p-4">
+										<div className="flex flex-wrap gap-1">
+											{contact.tags.map((tag) => (
+												<span
+													key={tag}
+													className="rounded-sm bg-muted px-2 py-1 text-xs"
+												>
+													{tag}
+												</span>
+											))}
+										</div>
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			) : (
+				<p className="py-10 text-muted-foreground">
+					No contacts match. Add a contact or adjust your filters.
+				</p>
+			)}
+			<Pagination offset={offset} total={data.total} onChange={setOffset} />
+		</CrmPage>
+	);
+}

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

@@ -0,0 +1,185 @@
+"use client";
+import { useState } from "react";
+import { PermissionAccess, usePluginSiteNavigation } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import {
+	useDeal,
+	usePipeline,
+	useDeleteDeal,
+	useMoveDeal,
+	useContact,
+	useCompany,
+} from "../../hooks";
+import { crmPermissions } from "../../../permissions";
+import { CRM_PLUGIN_ID } from "../../constants";
+import { ActivityTimeline } from "../activity-timeline";
+import { DealForm } from "../deal-form";
+import {
+	CrmPage,
+	Field,
+	Feedback,
+	DeleteRecord,
+	fullName,
+	money,
+	selectClass,
+	useCrmAction,
+} from "../shared";
+function LinkedContact({ id }: { id: string }) {
+	const { data } = useContact(id);
+	const { Link, resolve } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	return (
+		<Link
+			className="inline-flex min-h-11 items-center hover:underline"
+			href={resolve(`crm/contacts/${id}`).href}
+		>
+			{fullName(data)}
+		</Link>
+	);
+}
+function LinkedCompany({ id }: { id: string }) {
+	const { data } = useCompany(id);
+	return <span>{data.name}</span>;
+}
+export function DealDetailPage({ id }: { id: string }) {
+	const { data: deal } = useDeal(id);
+	const { data: pipeline } = usePipeline(deal.pipelineId);
+	const remove = useDeleteDeal();
+	const move = useMoveDeal();
+	const [editing, setEditing] = useState(false);
+	const { Link, resolve, navigate } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const action = useCrmAction();
+	const facts = {
+		id,
+		pipelineId: deal.pipelineId,
+		contactId: deal.contactId ?? null,
+		companyId: deal.companyId ?? null,
+	};
+	return (
+		<CrmPage
+			title={deal.title}
+			description={money(deal.value, deal.currency)}
+			action={
+				<PermissionAccess permission={crmPermissions.deal.update(facts)}>
+					<Button
+						className="min-h-11"
+						variant="outline"
+						onClick={() => setEditing(!editing)}
+					>
+						Edit deal
+					</Button>
+				</PermissionAccess>
+			}
+		>
+			<Feedback {...action} />
+			{editing && (
+				<DealForm
+					pipeline={pipeline}
+					deal={deal}
+					onSaved={() => setEditing(false)}
+					onCancel={() => setEditing(false)}
+				/>
+			)}
+			<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
+				<aside className="min-w-0 space-y-6">
+					<section className="space-y-5 rounded-lg border p-5">
+						<h2 className="text-lg font-semibold">Deal details</h2>
+						<dl className="space-y-4 text-sm">
+							<div>
+								<dt className="text-muted-foreground">Pipeline</dt>
+								<dd>
+									<Link
+										className="inline-flex min-h-11 items-center hover:underline"
+										href={resolve(`crm/pipeline/${pipeline.id}`).href}
+									>
+										{pipeline.name}
+									</Link>
+								</dd>
+							</div>
+							<div>
+								<dt className="text-muted-foreground">Status</dt>
+								<dd className="mt-1 capitalize">{deal.status}</dd>
+							</div>
+							{deal.contactId && (
+								<div>
+									<dt className="text-muted-foreground">Contact</dt>
+									<dd>
+										<LinkedContact id={deal.contactId} />
+									</dd>
+								</div>
+							)}
+							{deal.companyId && (
+								<div>
+									<dt className="text-muted-foreground">Company</dt>
+									<dd className="mt-1">
+										<LinkedCompany id={deal.companyId} />
+									</dd>
+								</div>
+							)}
+							{deal.closeDate && (
+								<div>
+									<dt className="text-muted-foreground">Close date</dt>
+									<dd className="mt-1">
+										<time dateTime={deal.closeDate}>
+											{new Date(deal.closeDate).toLocaleDateString()}
+										</time>
+									</dd>
+								</div>
+							)}
+						</dl>
+						<Field label="Stage">
+							{(fieldId) => (
+								<select
+									id={fieldId}
+									className={selectClass}
+									value={deal.stage}
+									disabled={move.isPending}
+									onChange={(event) => {
+										const stage = event.target.value;
+										void action.run(async () => {
+											await move.mutateAsync({ id, stage });
+										}, "Deal stage updated");
+									}}
+								>
+									{pipeline.columns.map((column) =>
+										column.id === deal.stage ? (
+											<option key={column.id} value={column.id}>
+												{column.title}
+											</option>
+										) : (
+											<PermissionAccess
+												key={column.id}
+												permission={crmPermissions.deal.move({
+													...facts,
+													targetStage: column.id,
+												})}
+											>
+												<option value={column.id}>{column.title}</option>
+											</PermissionAccess>
+										),
+									)}
+								</select>
+							)}
+						</Field>
+					</section>
+					<PermissionAccess permission={crmPermissions.deal.delete(facts)}>
+						<DeleteRecord
+							label="Delete deal"
+							description="This deal and its pipeline card will be removed."
+							pending={remove.isPending}
+							onDelete={() =>
+								void action.run(async () => {
+									await remove.mutateAsync(id);
+									await navigate(`crm/pipeline/${pipeline.id}`);
+								})
+							}
+						/>
+					</PermissionAccess>
+				</aside>
+				<ActivityTimeline
+					dealId={id}
+					description={`Deal: ${JSON.stringify(deal)}\nPipeline: ${pipeline.name}\nStage: ${pipeline.columns.find((c) => c.id === deal.stage)?.title}`}
+				/>
+			</div>
+		</CrmPage>
+	);
+}