@btst/stack 5.1.0 → 5.2.0

package/src/plugins/crm/client/components/relation-options.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useDeferredValue, useState } from "react";
+import { useDebounce } from "@btst/stack/plugins/client/hooks";
+import { Input } from "@workspace/ui/components/input";
+import { useCompanies, useCompany, useContacts, useContact } from "../hooks";
+import { Field, fullName, selectClass } from "./shared";
+
+function SelectedCompanyOption({ id }: { id: string }) {
+	const { data: company } = useCompany(id);
+	return <option value={company.id}>{company.name}</option>;
+}
+
+function SelectedContactOption({ id }: { id: string }) {
+	const { data: contact } = useContact(id);
+	return <option value={contact.id}>{fullName(contact)}</option>;
+}
+
+export function CompanyRelationFields({ value = "" }: { value?: string }) {
+	const [selected, setSelected] = useState(value);
+	const [search, setSearch] = useState("");
+	const deferredSearch = useDeferredValue(useDebounce(search, 300));
+	const { data: companies } = useCompanies({
+		limit: 200,
+		search: deferredSearch || undefined,
+	});
+	return (
+		<div
+			className="space-y-4"
+			role="group"
+			aria-label="Company selection"
+			aria-busy={search !== deferredSearch}
+		>
+			<Field label="Search companies">
+				{(id) => (
+					<Input
+						id={id}
+						type="search"
+						value={search}
+						onChange={(event) => setSearch(event.target.value)}
+						placeholder="Company name, domain, or phone"
+					/>
+				)}
+			</Field>
+			<Field label="Company">
+				{(id) => (
+					<select
+						id={id}
+						name="companyId"
+						className={selectClass}
+						value={selected}
+						onChange={(event) => setSelected(event.target.value)}
+					>
+						<option value="">No linked company</option>
+						{selected &&
+							!companies.items.some((company) => company.id === selected) && (
+								<SelectedCompanyOption id={selected} />
+							)}
+						{companies.items.map((company) => (
+							<option key={company.id} value={company.id}>
+								{company.name}
+							</option>
+						))}
+					</select>
+				)}
+			</Field>
+		</div>
+	);
+}
+
+export function ContactRelationFields({ value = "" }: { value?: string }) {
+	const [selected, setSelected] = useState(value);
+	const [search, setSearch] = useState("");
+	const deferredSearch = useDeferredValue(useDebounce(search, 300));
+	const { data: contacts } = useContacts({
+		limit: 200,
+		search: deferredSearch || undefined,
+	});
+	return (
+		<div
+			className="space-y-4"
+			role="group"
+			aria-label="Contact selection"
+			aria-busy={search !== deferredSearch}
+		>
+			<Field label="Search contacts">
+				{(id) => (
+					<Input
+						id={id}
+						type="search"
+						value={search}
+						onChange={(event) => setSearch(event.target.value)}
+						placeholder="Name, email, or any contact detail"
+					/>
+				)}
+			</Field>
+			<Field label="Contact">
+				{(id) => (
+					<select
+						id={id}
+						name="contactId"
+						className={selectClass}
+						value={selected}
+						onChange={(event) => setSelected(event.target.value)}
+					>
+						<option value="">No linked contact</option>
+						{selected &&
+							!contacts.items.some((contact) => contact.id === selected) && (
+								<SelectedContactOption id={selected} />
+							)}
+						{contacts.items.map((contact) => (
+							<option key={contact.id} value={contact.id}>
+								{fullName(contact)}
+							</option>
+						))}
+					</select>
+				)}
+			</Field>
+		</div>
+	);
+}

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

@@ -0,0 +1,275 @@
+"use client";
+
+import { useId, useState, type ReactNode } from "react";
+import {
+	PermissionAccess,
+	usePluginOverrides,
+	usePluginSiteNavigation,
+} from "@btst/stack/context";
+import type { FallbackProps } from "@btst/stack/client/components";
+import { Button } from "@workspace/ui/components/button";
+import { Label } from "@workspace/ui/components/label";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+import { crmPermissions } from "../../permissions";
+import { CRM_PLUGIN_ID } from "../constants";
+import type { CrmPluginOverrides } from "../overrides";
+
+export function CrmPage({
+	title,
+	description,
+	action,
+	children,
+}: {
+	title: string;
+	description?: string;
+	action?: ReactNode;
+	children: ReactNode;
+}) {
+	const { Link, resolve } = usePluginSiteNavigation(CRM_PLUGIN_ID);
+	const { localization } =
+		usePluginOverrides<CrmPluginOverrides>(CRM_PLUGIN_ID);
+	return (
+		<div
+			className="container mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6 sm:py-8"
+			data-testid="crm-page"
+		>
+			<header className="flex flex-wrap items-start justify-between gap-4">
+				<div className="min-w-0 space-y-2">
+					<h1 className="break-words text-3xl font-semibold tracking-tight">
+						{title}
+					</h1>
+					{description && (
+						<p className="max-w-2xl text-muted-foreground">{description}</p>
+					)}
+				</div>
+				{action}
+			</header>
+			<nav
+				aria-label="CRM"
+				className="flex flex-wrap gap-x-6 border-b text-sm font-medium"
+			>
+				{(
+					[
+						[
+							"contacts",
+							localization?.contacts ?? "Contacts",
+							crmPermissions.contact.read(),
+						],
+						[
+							"companies",
+							localization?.companies ?? "Companies",
+							crmPermissions.company.read(),
+						],
+					] as const
+				).map(([path, label, permission]) => (
+					<PermissionAccess key={path} permission={permission}>
+						<Link
+							href={resolve(`crm/${path}`).href}
+							className="inline-flex min-h-11 items-center rounded-sm hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+						>
+							{label}
+						</Link>
+					</PermissionAccess>
+				))}
+				<PermissionAccess permission={crmPermissions.pipeline.read()}>
+					<PermissionAccess permission={crmPermissions.deal.read()}>
+						<Link
+							href={resolve("crm/pipelines").href}
+							className="inline-flex min-h-11 items-center rounded-sm hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+						>
+							{localization?.pipelines ?? "Pipelines"}
+						</Link>
+					</PermissionAccess>
+				</PermissionAccess>
+			</nav>
+			{children}
+		</div>
+	);
+}
+export function Field({
+	label,
+	children,
+	hint,
+}: {
+	label: string;
+	children: (id: string) => ReactNode;
+	hint?: string;
+}) {
+	const id = useId();
+	return (
+		<div className="min-w-0 space-y-2">
+			<Label htmlFor={id}>{label}</Label>
+			{children(id)}
+			{hint && <p className="text-sm text-muted-foreground">{hint}</p>}
+		</div>
+	);
+}
+export function CrmLoading() {
+	return (
+		<p className="p-8" role="status">
+			Loading CRM…
+		</p>
+	);
+}
+export function CrmError({ resetErrorBoundary }: FallbackProps) {
+	return (
+		<div className="space-y-4 p-8" role="alert">
+			<h1 className="text-2xl font-semibold">CRM unavailable</h1>
+			<p>
+				CRM information could not be loaded. Check your access or try again.
+			</p>
+			<Button onClick={resetErrorBoundary} variant="outline">
+				Retry loading
+			</Button>
+		</div>
+	);
+}
+export function CrmNotFound({ message }: { message: string }) {
+	return (
+		<div className="space-y-2 p-8">
+			<h1 className="text-2xl font-semibold">Record not found</h1>
+			<p>{message}</p>
+		</div>
+	);
+}
+export const selectClass =
+	"border-input bg-background min-h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:outline-2 focus-visible:outline-ring";
+export function useCrmAction() {
+	const [error, setError] = useState("");
+	const [message, setMessage] = useState("");
+	return {
+		error,
+		message,
+		run: async (action: () => Promise<void>, success?: string) => {
+			setError("");
+			setMessage("");
+			try {
+				await action();
+				if (success) setMessage(success);
+			} catch (error) {
+				setError(
+					error instanceof Error
+						? error.message
+						: "The change could not be saved. Try again.",
+				);
+			}
+		},
+	};
+}
+export function Feedback({
+	error,
+	message,
+}: {
+	error?: string;
+	message?: string;
+}) {
+	return (
+		<>
+			{error && (
+				<p role="alert" className="text-sm text-destructive">
+					{error}
+				</p>
+			)}
+			{message && (
+				<p role="status" className="text-sm">
+					{message}
+				</p>
+			)}
+		</>
+	);
+}
+export function DeleteRecord({
+	label,
+	description,
+	pending,
+	onDelete,
+}: {
+	label: string;
+	description: string;
+	pending: boolean;
+	onDelete: () => void;
+}) {
+	const [open, setOpen] = useState(false);
+	return (
+		<>
+			<Button
+				variant="outline"
+				className="min-h-11"
+				disabled={pending}
+				onClick={() => setOpen(true)}
+			>
+				{label}
+			</Button>
+			<AlertDialog open={open} onOpenChange={setOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>{label}?</AlertDialogTitle>
+						<AlertDialogDescription>{description}</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction disabled={pending} onClick={onDelete}>
+							{label}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
+	);
+}
+export function Pagination({
+	offset,
+	total,
+	onChange,
+}: {
+	offset: number;
+	total: number;
+	onChange: (offset: number) => void;
+}) {
+	return (
+		<div className="flex flex-wrap items-center justify-between gap-3 text-sm">
+			<p className="text-muted-foreground">
+				{total
+					? `${offset + 1}–${Math.min(offset + 25, total)} of ${total}`
+					: "No results"}
+			</p>
+			<div className="flex gap-2">
+				<Button
+					variant="outline"
+					className="min-h-11"
+					disabled={!offset}
+					onClick={() => onChange(Math.max(0, offset - 25))}
+				>
+					Previous page
+				</Button>
+				<Button
+					variant="outline"
+					className="min-h-11"
+					disabled={offset + 25 >= total}
+					onClick={() => onChange(offset + 25)}
+				>
+					Next page
+				</Button>
+			</div>
+		</div>
+	);
+}
+export const fullName = (contact: {
+	firstName: string;
+	lastName?: string | null;
+}) => [contact.firstName, contact.lastName].filter(Boolean).join(" ");
+export const money = (value: number | null | undefined, currency: string) =>
+	value == null
+		? "No value"
+		: new Intl.NumberFormat(undefined, { style: "currency", currency }).format(
+				value,
+			);

package/src/plugins/crm/client/constants.ts

@@ -0,0 +1 @@
+export const CRM_PLUGIN_ID = "crm" as const;

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

@@ -0,0 +1,75 @@
+"use client";
+import { useIdentity, useIdentitySourceGeneration } from "@btst/stack/context";
+import { useQueryClient } from "@tanstack/react-query";
+import { useResourceContext } from "../../../client/resource/internal";
+import { createCrmQueryKeys } from "../../query-keys";
+import { createResource } from "@btst/stack/plugins/client/hooks";
+import { crmResources, type CrmListParams } from "../../query-keys";
+import { CRM_PLUGIN_ID } from "../constants";
+export const crm = createResource({
+	plugin: CRM_PLUGIN_ID,
+	resources: crmResources,
+});
+function useCrmIdentity() {
+	const { identity, isPending, error } = useIdentity();
+	const generation = useIdentitySourceGeneration();
+	if (isPending) return `pending:${generation}` as const;
+	if (error) return `error:${generation}` as const;
+	return identity ?? undefined;
+}
+/** Fetch CRM contacts scoped to the current identity. */
+export const useContacts = (params: CrmListParams = {}) =>
+	crm.crmContacts.list.useSuspense([params, useCrmIdentity()]);
+/** Fetch a CRM contact. */
+export const useContact = (id: string) =>
+	crm.crmContacts.detail.useSuspense([id, useCrmIdentity()]);
+export const useCreateContact = () => crm.crmContacts.create.use();
+export const useUpdateContact = () => crm.crmContacts.update.use();
+export const useDeleteContact = () => crm.crmContacts.delete.use();
+/** Fetch CRM companies scoped to the current identity. */
+export const useCompanies = (params: CrmListParams = {}) =>
+	crm.crmCompanies.list.useSuspense([params, useCrmIdentity()]);
+/** Fetch a CRM company. */
+export const useCompany = (id: string) =>
+	crm.crmCompanies.detail.useSuspense([id, useCrmIdentity()]);
+export const useCreateCompany = () => crm.crmCompanies.create.use();
+export const useUpdateCompany = () => crm.crmCompanies.update.use();
+export const useDeleteCompany = () => crm.crmCompanies.delete.use();
+/** Fetch CRM deals scoped to the current identity. */
+export const useDeals = (params: CrmListParams = {}) =>
+	crm.crmDeals.list.useSuspense([params, useCrmIdentity()]);
+/** Fetch a CRM deal. */
+export const useDeal = (id: string) =>
+	crm.crmDeals.detail.useSuspense([id, useCrmIdentity()]);
+export const useCreateDeal = () => crm.crmDeals.create.use();
+export const useUpdateDeal = () => crm.crmDeals.update.use();
+export const useDeleteDeal = () => crm.crmDeals.delete.use();
+/** Fetch CRM activities scoped to the current identity. */
+export const useActivities = (params: CrmListParams = {}) =>
+	crm.crmActivities.list.useSuspense([params, useCrmIdentity()]);
+export const useCreateActivity = () => crm.crmActivities.create.use();
+export const useUpdateActivity = () => crm.crmActivities.update.use();
+export const useDeleteActivity = () => crm.crmActivities.delete.use();
+/** Fetch CRM pipelines scoped to the current identity. */
+export const usePipelines = (params: CrmListParams = {}) =>
+	crm.crmPipelines.list.useSuspense([params, useCrmIdentity()]);
+/** Fetch a CRM pipeline. */
+export const usePipeline = (id: string) =>
+	crm.crmPipelines.detail.useSuspense([id, useCrmIdentity()]);
+export const useCreatePipeline = () => crm.crmPipelines.create.use();
+export const useMoveDeal = () => crm.crmDeals.move.use();
+
+/** Run an authorized contact search from a page AI tool using the same resource query. */
+export function useSearchContacts() {
+	const context = useResourceContext(CRM_PLUGIN_ID);
+	const queryClient = useQueryClient(context.queryClient);
+	const identity = useCrmIdentity();
+	return (params: CrmListParams) =>
+		queryClient.fetchQuery({
+			...createCrmQueryKeys(context.client, context.headers).crmContacts.list(
+				params,
+				identity,
+			),
+			staleTime: 0,
+		});
+}

package/src/plugins/crm/client/index.ts

@@ -0,0 +1,6 @@
+export {
+	crmClientPlugin,
+	type CrmClientConfig,
+	type CrmLoaderContext,
+} from "./plugin";
+export type { CrmPluginOverrides } from "./overrides";

package/src/plugins/crm/client/overrides.ts

@@ -0,0 +1,5 @@
+/** CRM labels supplied by the host application. */
+export interface CrmPluginOverrides {
+	/** Navigation labels; remaining labels use the built-in English copy. */
+	localization?: { contacts?: string; companies?: string; pipelines?: string };
+}