@graph8/sdk 0.358.0 → 0.362.0

package/blocks/quotes/block.json

@@ -24,7 +24,9 @@
     "edit_quote_as_draft_quotes__quote_id__edit_as_draft_post",
     "duplicate_quote_quotes__quote_id__duplicate_post",
     "delete_quote_quotes__quote_id__delete",
-    "resend_envelope_envelopes__envelope_id__resend_post"
+    "resend_envelope_envelopes__envelope_id__resend_post",
+    "list_deals_deals_get",
+    "get_deal_deals__deal_id__get"
   ],
   "components": [
     {
@@ -93,6 +95,26 @@
         "read",
         "external"
       ]
+    },
+    {
+      "name": "QuotesScreen",
+      "file": "components/quotes-screen.tsx",
+      "purpose": "Finished quotes product: status numbers, list, viewer with send and signature tracking, deal-first builder and draft editing.",
+      "operations": [],
+      "tiers": []
+    },
+    {
+      "name": "ProductCatalog",
+      "file": "components/quote-related.tsx",
+      "purpose": "Quotable products with a full product record (fields and prices); also exports QuoteDealTab, the deal a quote belongs to.",
+      "operations": [
+        "list_quotable_products_quotable_products_get",
+        "get_quote_quotes__quote_id__get",
+        "get_deal_deals__deal_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [
@@ -146,6 +168,7 @@
     }
   ],
   "scopes": [
+    "deals:read",
     "quotes:delete",
     "quotes:read",
     "quotes:run"
@@ -178,6 +201,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/quotes/components/quote-list.tsx

@@ -25,17 +25,21 @@ export interface QuoteListProps {
   onOpen?: (quoteId: string) => void;
   onNew?: () => void;
   pageSize?: number;
+  /** Change it to reload the current page after a save or delete elsewhere on the screen. */
+  refreshKey?: number;
+  /** Mark this quote row as the open one. */
+  selectedId?: string | null;
   className?: string;
 }
 
 const STATUSES = ["", "draft", "sent", "viewed", "accepted", "declined", "voided", "expired", "archived"];
 
-export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, className }: QuoteListProps) {
+export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, refreshKey, selectedId, className }: QuoteListProps) {
   const [status, setStatus] = useState("");
   const [page, setPage] = useState(1);
   const q = useG8Query(
     (signal) => g8Get("/quotes", { status: status || undefined, deal_id: dealId, mashup_company_id: companyId, page, limit: pageSize }, { signal }),
-    [status, dealId, companyId, page, pageSize],
+    [status, dealId, companyId, page, pageSize, refreshKey],
   );
   const data = body(q.data);
   const rows = (Array.isArray(data.items) ? data.items : []) as Rec[];
@@ -57,7 +61,7 @@ export function QuoteList({ dealId, companyId, onOpen, onNew, pageSize = 25, cla
           <TableHeader><TableRow><TableHead>Quote</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Total</TableHead><TableHead>Sent</TableHead></TableRow></TableHeader>
           <TableBody>
             {rows.map((r) => (
-              <TableRow key={text(r.id)}>
+              <TableRow key={text(r.id)} data-state={selectedId === text(r.id) ? "selected" : undefined}>
                 <TableCell><button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(text(r.id))}>{text(r.title, "Untitled quote")}</button><div className="text-muted-foreground text-xs">{text(r.quote_number)}</div></TableCell>
                 <TableCell>{statusLabel(r.status)}</TableCell>
                 <TableCell className="text-right">{money(r.total, text(r.currency, "USD"))}</TableCell>

package/blocks/quotes/components/quote-related.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+/**
+ * Catalog and related-record views for the quotes screen.
+ *
+ * ProductCatalog: every quotable product (Stripe and manual) as a list, with a full product record (all fields and
+ * every price) in a detail panel, and a "Start a quote" action.
+ * QuoteDealTab: the deal a quote belongs to, as a tab of the quote's detail.
+ *
+ * SDK operations, in order:
+ *   ProductCatalog: GET /quotable-products?page&limit  (quotes.listQuotableProducts)  read
+ *   QuoteDealTab:   GET /quotes/{id}                   (quotes.getQuote)              read - finds the deal id
+ *                   GET /deals/{id}                    (deals.getDeal)                read
+ * Nothing here is billable, external or destructive.
+ */
+import { useState } from "react";
+import { Package } from "lucide-react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { formatMoney, type Deal } from "@/g8/deals/lib/deals-types";
+import { body, frequencyOf, money, text, type QuotableProduct, type ProductPrice } from "../lib/quotes";
+
+const productKey = (p: QuotableProduct) => p.stripe_product_id ?? p.manual_product_id ?? p.name;
+const cadence = (p: ProductPrice) => (frequencyOf(p.recurring_interval) === "one_time" ? "One time" : `Per ${p.recurring_interval}`);
+
+export interface ProductCatalogProps {
+  /** Show the Start a quote action; wire it to your New quote flow. */
+  onStartQuote?: () => void;
+  pageSize?: number;
+}
+
+export function ProductCatalog({ onStartQuote, pageSize = 50 }: ProductCatalogProps) {
+  const [selected, setSelected] = useUrlState("product");
+  const [mode, setMode] = useUrlState("view");
+  const q = useG8Query((signal) => g8Get("/quotable-products", { page: 1, limit: pageSize }, { signal }), [pageSize]);
+  const data = body(q.data);
+  const items = (Array.isArray(data.items) ? data.items : []) as QuotableProduct[];
+  const product = items.find((p) => productKey(p) === selected);
+  const close = () => { setSelected(null); setMode(null); };
+
+  const list = q.error ? <ApiError error={q.error} title="Could not load products" onRetry={() => void q.refetch()} /> : q.loading && !q.data ? <Skeleton className="h-40 w-full" aria-label="Loading products" /> : items.length === 0 ? (
+    <EmptyState icon={<Package className="size-8" />} title="No quotable products" description="Mark a Stripe product as quotable, or add a manual product, in graph8's quote settings." />
+  ) : (
+    <Table>
+      <TableHeader><TableRow><TableHead>Product</TableHead><TableHead>Source</TableHead><TableHead className="text-right">Prices</TableHead></TableRow></TableHeader>
+      <TableBody>
+        {items.map((p) => (
+          <TableRow key={productKey(p)} className="cursor-pointer" data-state={productKey(p) === selected ? "selected" : undefined} onClick={() => setSelected(productKey(p))}>
+            <TableCell><button type="button" className="font-medium hover:underline" onClick={(e) => { e.stopPropagation(); setSelected(productKey(p)); }}>{p.name}</button><div className="text-xs text-muted-foreground">{p.category}</div></TableCell>
+            <TableCell><StatusPill tone="neutral">{p.source === "stripe" ? "Stripe" : "Manual"}</StatusPill></TableCell>
+            <TableCell className="text-right tabular-nums">{p.prices.length}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+
+  const detail = product ? (
+    <DetailPanel
+      title={product.name}
+      subtitle={product.category ?? undefined}
+      badges={<StatusPill tone="neutral">{product.source === "stripe" ? "Stripe" : "Manual"}</StatusPill>}
+      actions={onStartQuote ? <Button size="sm" onClick={onStartQuote}>Start a quote</Button> : undefined}
+      onClose={close}
+      onExpand={mode === "full" ? undefined : () => setMode("full")}
+      onCollapse={mode === "full" ? () => setMode(null) : undefined}
+      tabs={[{ id: "product", label: "Product", content: (
+        <div className="space-y-4">
+          <SectionCard title="Details">
+            <KeyValueList columns={2} items={[
+              { label: "Name", value: product.name }, { label: "Source", value: product.source }, { label: "Category", value: product.category },
+              { label: "Description", value: product.description }, { label: "Stripe product id", value: product.stripe_product_id, mono: true }, { label: "Manual product id", value: product.manual_product_id, mono: true },
+            ]} />
+          </SectionCard>
+          <SectionCard title="Prices" description="A quote line copies one of these prices.">
+            {product.prices.length === 0 ? <p className="text-sm text-muted-foreground">No flat price. Tiered Stripe prices cannot be quoted.</p> : (
+              <Table>
+                <TableHeader><TableRow><TableHead>Billing</TableHead><TableHead>Type</TableHead><TableHead className="text-right">Amount</TableHead></TableRow></TableHeader>
+                <TableBody>{product.prices.map((p, i) => <TableRow key={p.stripe_price_id ?? i}><TableCell>{cadence(p)}</TableCell><TableCell>{text(p.type)}</TableCell><TableCell className="text-right tabular-nums">{money(p.unit_amount, (p.currency ?? "usd").toUpperCase())}</TableCell></TableRow>)}</TableBody>
+              </Table>
+            )}
+          </SectionCard>
+        </div>
+      ) }]}
+    />
+  ) : null;
+
+  return <SplitView detailOpen={Boolean(product)} onCloseDetail={close} expanded={mode === "full" && Boolean(product)} onExpandedChange={(f) => setMode(f ? "full" : null)} list={list} detail={detail} />;
+}
+
+export function QuoteDealTab({ quoteId, onOpenDeal }: { quoteId: string; onOpenDeal?: (dealId: string) => void }) {
+  const q = useG8Query(async (signal) => {
+    const quote = body(await g8Get(`/quotes/${encodeURIComponent(quoteId)}`, undefined, { signal }));
+    const dealId = text(quote.deal_id);
+    if (!dealId) return null;
+    const env = await g8Get<Deal>(`/deals/${encodeURIComponent(dealId)}`, undefined, { signal });
+    return (env.data ?? env) as unknown as Deal;
+  }, [quoteId]);
+  if (q.error) return <ApiError error={q.error} title="Could not load the deal" onRetry={() => void q.refetch()} />;
+  if (q.loading && q.data === undefined) return <Skeleton className="h-24 w-full" aria-label="Loading deal" />;
+  const d = q.data;
+  if (!d) return <EmptyState title="No deal on this quote" />;
+  return (
+    <SectionCard title={d.name || "Deal"} actions={onOpenDeal ? <Button size="sm" variant="outline" onClick={() => onOpenDeal(d.id)}>Open deal</Button> : undefined}>
+      <KeyValueList columns={2} items={[
+        { label: "Stage", value: d.stage_name }, { label: "Amount", value: d.amount == null ? null : formatMoney(d.amount, d.currency) }, { label: "Owner", value: d.owner_name ?? d.owner_email },
+        { label: "Close date", value: d.close_date?.slice(0, 10) }, { label: "Pipeline", value: d.pipeline_name }, { label: "Contacts", value: d.contact_count },
+      ]} />
+    </SectionCard>
+  );
+}

package/blocks/quotes/components/quotes-screen.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+/**
+ * QuotesScreen: the finished quotes product. Every quote with its status, a viewer for the open one, a builder for
+ * new and draft quotes, and e-signature tracking. No props are required.
+ *
+ * It composes: ProductCatalog (Products tab), QuoteDealTab, QuoteList (status filter, paging), QuoteViewer (totals, send, resend, edit as draft, duplicate,
+ * delete, e-signature status and reminder), QuoteBuilder (details, signer, line items from ProductPicker) and a deal
+ * picker, because graph8 attaches every quote to a deal.
+ *
+ * Flows:
+ *   - Headline numbers by status: drafts, out for signature, accepted, declined.
+ *   - Open a quote (deep link ?id=<quote id>, full page with &view=full) -> line items, totals, signer, payment
+ *     terms, signature progress, and a Deal tab. The Products tab lists every quotable product; open one for all
+ *     its fields and prices (?tab=products&product=<id>).
+ *   - New quote: choose the deal (search by name; skipped when `dealId` is passed), then the builder. Saving a draft
+ *     emails nobody, so it needs no confirmation.
+ *   - Edit a draft from the viewer; duplicate; delete a draft (confirmed).
+ *   - Send for signature, resend, send a signature reminder, and edit a sent quote as a new draft: all external
+ *     actions, each behind ConfirmSpendDialog because they reach a real person.
+ *
+ * SDK operations (through the composed parts): listQuotes, getQuote, createQuote, updateQuotePatch,
+ * searchQuoteContacts, listQuotableProducts, sendQuote (external), editQuoteAsDraft (external), duplicateQuote,
+ * deleteQuote (destructive), resendEnvelope (external) and the deals block's listDeals (the deal picker).
+ *
+ * Slots (all optional): renderDetailActions, extraDetailTabs, toolbarActions.
+ */
+import { useState, type ReactNode } from "react";
+import { FileText, Plus, Search } from "lucide-react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { formatMoney, type Deal } from "@/g8/deals/lib/deals-types";
+import { useDebounced } from "../hooks/use-debounced";
+import { body } from "../lib/quotes";
+import { QuoteBuilder } from "./quote-builder";
+import { QuoteList } from "./quote-list";
+import { ProductCatalog, QuoteDealTab } from "./quote-related";
+import { QuoteViewer } from "./quote-viewer";
+
+export interface QuotesScreenProps {
+  /** Show only the quotes of this deal and create new ones for it. */
+  dealId?: string;
+  /** Show only the quotes of this company (mashup company id). */
+  companyId?: number;
+  renderDetailActions?: (quoteId: string) => ReactNode;
+  extraDetailTabs?: Array<{ id: string; label: string; render: (quoteId: string) => ReactNode }>;
+  toolbarActions?: ReactNode;
+  /** Open the quote's deal in your deals screen; without it the Deal tab is read-only. */
+  onOpenDeal?: (dealId: string) => void;
+}
+
+const STATUS_STATS: Array<{ status: string; label: string; tone?: "positive" | "negative" | "info" }> = [
+  { status: "draft", label: "Drafts" },
+  { status: "sent", label: "Out for signature", tone: "info" },
+  { status: "accepted", label: "Accepted", tone: "positive" },
+  { status: "declined", label: "Declined", tone: "negative" },
+];
+
+function useStatusTotals(dealId: string | undefined, companyId: number | undefined, refreshKey: number) {
+  return useG8Query(async (signal) => {
+    const totals = await Promise.all(STATUS_STATS.map(async (s) => {
+      const data = body(await g8Get("/quotes", { status: s.status, deal_id: dealId, mashup_company_id: companyId, page: 1, limit: 1 }, { signal }));
+      return typeof data.total === "number" ? data.total : 0;
+    }));
+    return totals;
+  }, [dealId, companyId, refreshKey]);
+}
+
+/** Step one of a new quote when no deal is given: find the deal the quote belongs to. */
+function DealStep({ onPick }: { onPick: (deal: Deal) => void }) {
+  const [text, setText] = useState("");
+  const term = useDebounced(text);
+  const deals = useG8Query(async (signal) => {
+    const env = await g8Get<Deal[]>("/deals", { search: term || undefined, limit: 10, page: 1 }, { signal });
+    return env.data ?? [];
+  }, [term]);
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">A quote belongs to a deal. Pick the deal first.</p>
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-2 top-2.5 size-4 text-muted-foreground" aria-hidden />
+        <Input aria-label="Search deals" className="pl-8" placeholder="Search deals by name" value={text} onChange={(e) => setText(e.target.value)} />
+      </div>
+      {deals.error ? <ApiError error={deals.error} title="Could not load deals" onRetry={() => void deals.refetch()} /> : null}
+      {!deals.loading && !deals.error && (deals.data ?? []).length === 0 ? <EmptyState title={term ? "No deals match" : "No deals yet"} description="Create a deal first, then quote it." /> : null}
+      <ul className="divide-y rounded-md border empty:hidden" aria-label="Deals">
+        {(deals.data ?? []).map((d) => (
+          <li key={d.id}>
+            <button type="button" className="flex w-full items-center justify-between gap-2 p-3 text-left text-sm hover:bg-muted" onClick={() => onPick(d)}>
+              <span><span className="font-medium">{d.name || "Untitled deal"}</span><span className="block text-xs text-muted-foreground">{d.stage_name ?? ""}</span></span>
+              <span className="tabular-nums text-muted-foreground">{formatMoney(d.amount, d.currency)}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function QuotesScreen({ dealId, companyId, renderDetailActions, extraDetailTabs, toolbarActions, onOpenDeal }: QuotesScreenProps) {
+  const [selectedId, setSelectedId] = useUrlState("id");
+  const [mode, setMode] = useUrlState("view");
+  const [tabParam, setTab] = useUrlState("tab", "quotes");
+  const tab = tabParam === "products" ? "products" : "quotes";
+  const [version, setVersion] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const [pickedDeal, setPickedDeal] = useState<Deal | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const totals = useStatusTotals(dealId, companyId, version);
+  const refresh = () => setVersion((v) => v + 1);
+  const close = () => { setSelectedId(null); setMode(null); };
+  const openNew = () => { setPickedDeal(null); setCreating(true); };
+  const saved = (id: string) => { setCreating(false); setEditingId(null); refresh(); setSelectedId(id); };
+  const builderDeal = dealId ?? pickedDeal?.id;
+
+  const stats = STATUS_STATS.map((s, i) => ({ label: s.label, value: totals.data ? (totals.data[i] ?? 0).toLocaleString() : "-", tone: s.tone }));
+
+  const detail = selectedId ? (
+    <DetailPanel
+      title="Quote"
+      actions={renderDetailActions?.(selectedId)}
+      onClose={close}
+      onExpand={mode === "full" ? undefined : () => setMode("full")}
+      onCollapse={mode === "full" ? () => setMode(null) : undefined}
+      tabs={[
+        { id: "quote", label: "Quote", content: <QuoteViewer key={selectedId} quoteId={selectedId} onEdit={setEditingId} onOpenQuote={(id) => { refresh(); setSelectedId(id); }} onDeleted={() => { close(); refresh(); }} /> },
+        { id: "deal", label: "Deal", content: <QuoteDealTab key={selectedId} quoteId={selectedId} onOpenDeal={onOpenDeal} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selectedId) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      title="Quotes"
+      description="Build quotes from your products, send them for signature and track who has signed."
+      icon={<FileText className="size-5" />}
+      actions={<>{toolbarActions}<Button onClick={openNew}><Plus className="size-4" aria-hidden />New quote</Button></>}
+      stats={stats}
+      tabs={[{ id: "quotes", label: "Quotes" }, { id: "products", label: "Products" }]}
+      activeTab={tab}
+      onTabChange={(id) => { setTab(id); close(); }}
+    >
+      {totals.error ? <ApiError error={totals.error} title="Could not load quote numbers" onRetry={() => void totals.refetch()} /> : null}
+      {tab === "products" ? <ProductCatalog onStartQuote={openNew} /> : <SplitView
+        detailOpen={Boolean(selectedId)}
+        onCloseDetail={close}
+        expanded={mode === "full" && Boolean(selectedId)}
+        onExpandedChange={(full) => setMode(full ? "full" : null)}
+        detail={detail}
+        list={<QuoteList dealId={dealId} companyId={companyId} refreshKey={version} selectedId={selectedId} onOpen={setSelectedId} onNew={openNew} />}
+      />}
+      <FormSheet open={creating} onOpenChange={setCreating} title="New quote" description={pickedDeal ? `For ${pickedDeal.name ?? "this deal"}` : undefined}>
+        {creating ? (builderDeal ? <QuoteBuilder key={builderDeal} dealId={builderDeal} companyId={companyId} onSaved={saved} /> : <DealStep onPick={setPickedDeal} />) : null}
+      </FormSheet>
+      <FormSheet open={editingId != null} onOpenChange={(o) => { if (!o) setEditingId(null); }} title="Edit draft quote">
+        {editingId ? <QuoteBuilder key={editingId} quoteId={editingId} onSaved={saved} /> : null}
+      </FormSheet>
+    </ScreenLayout>
+  );
+}