@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/crm/functions/moveDeal.ts

@@ -0,0 +1,53 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidStage, stageById } from "../lib/pipeline";
+
+/**
+ * Move a deal to another stage, and log the move on its timeline.
+ *
+ * A mutation rather than a plain `db.update` from the board, because two things
+ * have to happen together: the stage changes and the history records who moved
+ * it and when. A forecast you can't audit is a forecast nobody trusts.
+ *
+ * The stage is validated server-side — the board only ever sends known stages,
+ * but the endpoint is reachable directly and an unknown stage would strand the
+ * deal in a column that doesn't render.
+ */
+export default mutation<
+  { dealId: string; stage: string },
+  { ok: true }
+>({
+  auth: "user",
+  args: { dealId: v.id("Deal"), stage: v.string() },
+  async handler(ctx, args) {
+    if (!isValidStage(args.stage)) {
+      throw ctx.error("INVALID_ARGS", `Unknown stage "${args.stage}".`);
+    }
+
+    const deal = await ctx.db.get("Deal", args.dealId);
+    if (!deal) throw ctx.error("NOT_FOUND", "Deal not found.");
+
+    const from = String(deal.stage ?? "");
+    // Re-dropping a card in its own column reaches here on a fast double-drag.
+    // Nothing changed, so don't write a history entry claiming it did.
+    if (from === args.stage) return { ok: true } as const;
+
+    const now = new Date().toISOString();
+    await ctx.db.update("Deal", args.dealId, {
+      stage: args.stage,
+      updatedAt: now,
+    });
+
+    await ctx.db.insert("Activity", {
+      kind: "note",
+      body: `Moved from ${stageById(from)?.label ?? from} to ${
+        stageById(args.stage)?.label ?? args.stage
+      }`,
+      dealId: args.dealId,
+      companyId: deal.companyId ?? null,
+      ownerId: ctx.auth.userId,
+      createdAt: now,
+    });
+
+    return { ok: true } as const;
+  },
+});

package/templates/crm/functions/seedWorkspace.ts

@@ -0,0 +1,63 @@
+import { mutation } from "@pylonsync/functions";
+import { shapeSeed } from "../lib/seed";
+
+/**
+ * Fill a brand-new workspace with a realistic pipeline, once.
+ *
+ * An empty CRM demonstrates nothing — no board, no forecast, no sense of what
+ * the app is for. The client calls this after sign-in; it returns immediately
+ * if any company already exists, so it is safe to call on every load and can
+ * never duplicate the fixtures or touch real data.
+ *
+ * Delete this function and lib/seed.ts once the workspace has real customers.
+ */
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  args: {},
+  async handler(ctx) {
+    // The guard is "has anything at all", not "has the seed", so a workspace
+    // whose demo rows were deleted on purpose stays deleted.
+    const existing = await ctx.db.query("Company", { $limit: 1 });
+    if (existing.length > 0) return { seeded: false };
+
+    const seed = shapeSeed();
+    const owner = ctx.auth.userId;
+
+    const companyIds = new Map<string, string>();
+    for (const company of seed.companies) {
+      const id = await ctx.db.insert("Company", { ...company.row, ownerId: owner });
+      companyIds.set(company.key, id as string);
+    }
+
+    const contactIds = new Map<string, string>();
+    for (const contact of seed.contacts) {
+      const id = await ctx.db.insert("Contact", {
+        ...contact.row,
+        companyId: companyIds.get(contact.company) ?? null,
+        ownerId: owner,
+      });
+      contactIds.set(String(contact.row.name), id as string);
+    }
+
+    const dealIds = new Map<string, string>();
+    for (const deal of seed.deals) {
+      const id = await ctx.db.insert("Deal", {
+        ...deal.row,
+        companyId: companyIds.get(deal.company) ?? null,
+        contactId: contactIds.get(deal.contact) ?? null,
+        ownerId: owner,
+      });
+      dealIds.set(deal.title, id as string);
+    }
+
+    for (const activity of seed.activities) {
+      await ctx.db.insert("Activity", {
+        ...activity.row,
+        dealId: dealIds.get(activity.deal) ?? null,
+        ownerId: owner,
+      });
+    }
+
+    return { seeded: true };
+  },
+});

package/templates/crm/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store

package/templates/crm/lib/pipeline.ts

@@ -0,0 +1,221 @@
+// The pipeline model: stages, money, forecasting, and grouping.
+//
+// Everything here is pure — no React, no `db`. That's what makes the numbers on
+// the board testable without standing up the app, and it's the layer to extend
+// first when you change how the business measures itself.
+
+export interface Stage {
+  id: string;
+  label: string;
+  /** Terminal stages leave the forecast: a won or lost deal is no longer open. */
+  closed?: "won" | "lost";
+  /** Rough likelihood a deal at this stage closes, for the weighted forecast. */
+  probability: number;
+}
+
+export const PIPELINE: Stage[] = [
+  { id: "lead", label: "Lead", probability: 0.1 },
+  { id: "qualified", label: "Qualified", probability: 0.3 },
+  { id: "proposal", label: "Proposal", probability: 0.6 },
+  { id: "won", label: "Won", closed: "won", probability: 1 },
+  { id: "lost", label: "Lost", closed: "lost", probability: 0 },
+];
+
+/** Stages shown as board columns — closed/lost is history, not pipeline. */
+export const BOARD_STAGES = PIPELINE.filter((s) => s.closed !== "lost");
+
+export const ACTIVITY_KINDS = ["note", "call", "email", "meeting"] as const;
+export type ActivityKind = (typeof ACTIVITY_KINDS)[number];
+
+export interface Deal {
+  id: string;
+  title: string;
+  value?: number | null;
+  stage: string;
+  companyId?: string | null;
+  contactId?: string | null;
+  closeDate?: string | null;
+  ownerId?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+}
+
+export function stageById(id: string): Stage | undefined {
+  return PIPELINE.find((s) => s.id === id);
+}
+
+export function isValidStage(id: string): boolean {
+  return PIPELINE.some((s) => s.id === id);
+}
+
+export function isOpen(deal: { stage: string }): boolean {
+  return !stageById(deal.stage)?.closed;
+}
+
+/** The stage a deal advances to, or null when it's already terminal. */
+export function nextStage(current: string): string | null {
+  const open = PIPELINE.filter((s) => s.closed !== "lost");
+  const index = open.findIndex((s) => s.id === current);
+  if (index === -1 || index === open.length - 1) return null;
+  return open[index + 1].id;
+}
+
+export function previousStage(current: string): string | null {
+  const open = PIPELINE.filter((s) => s.closed !== "lost");
+  const index = open.findIndex((s) => s.id === current);
+  if (index <= 0) return null;
+  return open[index - 1].id;
+}
+
+export interface Column {
+  stage: Stage;
+  deals: Deal[];
+  total: number;
+}
+
+/**
+ * Group deals into board columns, newest first within a column. Deals with an
+ * unrecognised stage are dropped rather than silently piled into "Lead" — a
+ * stage typo should be visible in a test, not disguised as a lead.
+ */
+export function groupByStage(deals: Deal[], stages: Stage[] = BOARD_STAGES): Column[] {
+  return stages.map((stage) => {
+    const inStage = deals
+      .filter((deal) => deal.stage === stage.id)
+      .sort((a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? ""));
+    return { stage, deals: inStage, total: sumValue(inStage) };
+  });
+}
+
+export function sumValue(deals: Deal[]): number {
+  return deals.reduce((sum, deal) => sum + (Number(deal.value) || 0), 0);
+}
+
+export interface Metrics {
+  /** Total value of every deal still in play. */
+  open: number;
+  /** Open value scaled by each stage's probability — the honest number. */
+  weighted: number;
+  won: number;
+  lost: number;
+  openCount: number;
+  /** Won / (won + lost), or null when nothing has closed yet. */
+  winRate: number | null;
+}
+
+export function metrics(deals: Deal[]): Metrics {
+  let open = 0;
+  let weighted = 0;
+  let won = 0;
+  let lost = 0;
+  let openCount = 0;
+  let wonCount = 0;
+  let lostCount = 0;
+
+  for (const deal of deals) {
+    const value = Number(deal.value) || 0;
+    const stage = stageById(deal.stage);
+    if (!stage) continue;
+    if (stage.closed === "won") {
+      won += value;
+      wonCount += 1;
+    } else if (stage.closed === "lost") {
+      lost += value;
+      lostCount += 1;
+    } else {
+      open += value;
+      weighted += value * stage.probability;
+      openCount += 1;
+    }
+  }
+
+  const decided = wonCount + lostCount;
+  return {
+    open,
+    weighted: Math.round(weighted),
+    won,
+    lost,
+    openCount,
+    winRate: decided === 0 ? null : wonCount / decided,
+  };
+}
+
+/**
+ * Compact currency for dense UI: $1.2M, $840K, $1,200. Board columns and cards
+ * have to line up in a narrow space, and "$1,240,000" wrecks that.
+ */
+export function money(value: number | null | undefined): string {
+  const n = Number(value) || 0;
+  const sign = n < 0 ? "-" : "";
+  const abs = Math.abs(n);
+  if (abs >= 1_000_000) return `${sign}$${trim(abs / 1_000_000)}M`;
+  if (abs >= 10_000) return `${sign}$${Math.round(abs / 1_000)}K`;
+  return `${sign}$${Math.round(abs).toLocaleString("en-US")}`;
+}
+
+function trim(value: number): string {
+  return value.toFixed(1).replace(/\.0$/, "");
+}
+
+export function percent(value: number | null): string {
+  return value === null ? "—" : `${Math.round(value * 100)}%`;
+}
+
+/** Initials for an avatar: "Acme Corp" → "AC", "jordan@x.com" → "J". */
+export function initials(nameOrEmail: string | null | undefined): string {
+  const raw = (nameOrEmail ?? "").trim();
+  if (!raw) return "?";
+  const name = raw.includes("@") ? raw.split("@")[0] : raw;
+  const parts = name.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+/**
+ * A deterministic accent per record, so the same company keeps the same colour
+ * across sessions and machines. Hashing beats storing a colour: no migration,
+ * no drift between two clients rendering the same row.
+ */
+export function accentIndex(seed: string, buckets = 6): number {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash) % buckets;
+}
+
+/** "just now" / "4h ago" / "Mar 3" — timeline density without a date library. */
+export function relativeTime(
+  iso: string | null | undefined,
+  now: number = Date.now(),
+): string {
+  if (!iso) return "";
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) return "";
+  const seconds = Math.round((now - then) / 1000);
+  if (seconds < 45) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(then).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+/** Days until close: negative is overdue, null when there's no date set. */
+export function daysUntil(
+  iso: string | null | undefined,
+  now: number = Date.now(),
+): number | null {
+  if (!iso) return null;
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) return null;
+  const startOfDay = (ms: number) => {
+    const d = new Date(ms);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+  };
+  return Math.round((startOfDay(then) - startOfDay(now)) / 86_400_000);
+}

package/templates/crm/lib/search.ts

@@ -0,0 +1,78 @@
+// Client-side search powering the ⌘K palette.
+//
+// A small team's CRM fits in the synced replica, so search runs locally against
+// data already in memory: results appear as you type, with no request per
+// keystroke. Swap in `db.useSearch` (Pylon's FTS) when a workspace outgrows
+// that — the component boundary doesn't change, only this file.
+
+export interface SearchItem {
+  id: string;
+  type: "deal" | "company" | "contact";
+  title: string;
+  /** Second line: the company for a contact, the domain for a company. */
+  subtitle?: string;
+  href: string;
+  /** Extra text matched but not displayed — an email, say. */
+  keywords?: string;
+}
+
+export interface Scored extends SearchItem {
+  score: number;
+}
+
+/**
+ * Rank items against a query. Prefix matches beat word-boundary matches, which
+ * beat substring matches; ties break on the shorter title, so "Acme" ranks
+ * above "Acme Corporation Holdings" for the query "acme".
+ */
+export function searchItems(
+  items: SearchItem[],
+  query: string,
+  limit = 8,
+): SearchItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items.slice(0, limit);
+
+  const scored: Scored[] = [];
+  for (const item of items) {
+    const score = scoreItem(item, q);
+    if (score > 0) scored.push({ ...item, score });
+  }
+  scored.sort(
+    (a, b) => b.score - a.score || a.title.length - b.title.length ||
+      a.title.localeCompare(b.title),
+  );
+  return scored.slice(0, limit);
+}
+
+function scoreItem(item: SearchItem, q: string): number {
+  const title = item.title.toLowerCase();
+  if (title.startsWith(q)) return 100;
+  if (wordStart(title, q)) return 80;
+  if (title.includes(q)) return 60;
+
+  const haystack = `${item.subtitle ?? ""} ${item.keywords ?? ""}`.toLowerCase();
+  if (wordStart(haystack, q)) return 40;
+  if (haystack.includes(q)) return 20;
+  return 0;
+}
+
+function wordStart(haystack: string, needle: string): boolean {
+  let from = 0;
+  for (;;) {
+    const at = haystack.indexOf(needle, from);
+    if (at === -1) return false;
+    if (at === 0 || /[\s._@/-]/.test(haystack[at - 1])) return true;
+    from = at + 1;
+  }
+}
+
+/** Move through a list with arrow keys, wrapping at both ends. */
+export function moveSelection(
+  current: number,
+  delta: number,
+  length: number,
+): number {
+  if (length === 0) return 0;
+  return (current + delta + length) % length;
+}

package/templates/crm/lib/seed.ts

@@ -0,0 +1,130 @@
+// Demo data for a brand-new workspace.
+//
+// An empty CRM teaches you nothing: no board, no forecast, no sense of what the
+// thing is for. The first sign-in seeds a realistic pipeline so the app opens
+// with something to look at, then never touches the data again.
+//
+// Pure data + pure shaping, so the seeding function stays a thin wrapper and
+// this file can be edited (or emptied) without reading any server code.
+
+export interface SeedCompany {
+  key: string;
+  name: string;
+  domain: string;
+  industry: string;
+  size: string;
+}
+
+export interface SeedContact {
+  company: string;
+  name: string;
+  email: string;
+  title: string;
+}
+
+export interface SeedDeal {
+  company: string;
+  contact: string;
+  title: string;
+  value: number;
+  stage: string;
+  /** Days from today; negative is in the past. */
+  closeInDays: number;
+}
+
+export interface SeedActivity {
+  deal: string;
+  kind: string;
+  body: string;
+  /** Hours ago. */
+  age: number;
+}
+
+export const SEED_COMPANIES: SeedCompany[] = [
+  { key: "northwind", name: "Northwind Logistics", domain: "northwind.co", industry: "Logistics", size: "200-500" },
+  { key: "hallmark", name: "Hallmark Dental", domain: "hallmarkdental.com", industry: "Healthcare", size: "10-50" },
+  { key: "riverbed", name: "Riverbed Coffee", domain: "riverbed.coffee", industry: "Food & Beverage", size: "50-200" },
+  { key: "atlas", name: "Atlas Fitness", domain: "atlasfitness.io", industry: "Fitness", size: "10-50" },
+  { key: "quarry", name: "Quarry Design Co", domain: "quarry.design", industry: "Agency", size: "1-10" },
+  { key: "beacon", name: "Beacon Property", domain: "beaconproperty.com", industry: "Real Estate", size: "50-200" },
+];
+
+export const SEED_CONTACTS: SeedContact[] = [
+  { company: "northwind", name: "Dana Whitfield", email: "dana@northwind.co", title: "VP Operations" },
+  { company: "northwind", name: "Marcus Iyer", email: "marcus@northwind.co", title: "Head of IT" },
+  { company: "hallmark", name: "Priya Raman", email: "priya@hallmarkdental.com", title: "Practice Manager" },
+  { company: "riverbed", name: "Tom Alvarez", email: "tom@riverbed.coffee", title: "Founder" },
+  { company: "atlas", name: "Simone Clarke", email: "simone@atlasfitness.io", title: "Owner" },
+  { company: "quarry", name: "Ben Osei", email: "ben@quarry.design", title: "Principal" },
+  { company: "beacon", name: "Lena Fischer", email: "lena@beaconproperty.com", title: "Director of Sales" },
+];
+
+export const SEED_DEALS: SeedDeal[] = [
+  { company: "northwind", contact: "Dana Whitfield", title: "Fleet dispatch rollout", value: 48000, stage: "proposal", closeInDays: 12 },
+  { company: "northwind", contact: "Marcus Iyer", title: "Warehouse scanner pilot", value: 9500, stage: "qualified", closeInDays: 26 },
+  { company: "hallmark", contact: "Priya Raman", title: "Patient intake portal", value: 15200, stage: "won", closeInDays: -8 },
+  { company: "riverbed", contact: "Tom Alvarez", title: "Multi-store inventory", value: 22000, stage: "proposal", closeInDays: 5 },
+  { company: "atlas", contact: "Simone Clarke", title: "Class booking system", value: 7400, stage: "lead", closeInDays: 40 },
+  { company: "quarry", contact: "Ben Osei", title: "Client portal build", value: 31000, stage: "qualified", closeInDays: 18 },
+  { company: "beacon", contact: "Lena Fischer", title: "Listing sync integration", value: 64000, stage: "lead", closeInDays: 55 },
+  { company: "beacon", contact: "Lena Fischer", title: "Agent CRM migration", value: 18500, stage: "lost", closeInDays: -21 },
+];
+
+export const SEED_ACTIVITIES: SeedActivity[] = [
+  { deal: "Fleet dispatch rollout", kind: "call", body: "Walked Dana through the dispatch flow. Wants a security review before signing — sending the SOC 2 summary.", age: 5 },
+  { deal: "Fleet dispatch rollout", kind: "email", body: "Sent revised proposal with the 3-year term and onboarding included.", age: 30 },
+  { deal: "Patient intake portal", kind: "note", body: "Signed. Kickoff scheduled for the 14th — Priya is the day-to-day contact.", age: 190 },
+  { deal: "Multi-store inventory", kind: "meeting", body: "Demo with Tom and the two store leads. Main question is offline mode at the market stall.", age: 48 },
+  { deal: "Client portal build", kind: "note", body: "Ben wants SSO with their Google Workspace. Confirmed that's in scope.", age: 72 },
+  { deal: "Listing sync integration", kind: "call", body: "Intro call. They're evaluating two other vendors; decision in Q3.", age: 96 },
+];
+
+export interface ShapedSeed {
+  companies: Array<{ key: string; row: Record<string, unknown> }>;
+  contacts: Array<{ company: string; row: Record<string, unknown> }>;
+  deals: Array<{ company: string; contact: string; title: string; row: Record<string, unknown> }>;
+  activities: Array<{ deal: string; row: Record<string, unknown> }>;
+}
+
+/**
+ * Turn the fixtures into insertable rows with dates relative to `now`, so a
+ * workspace seeded today shows deals closing next week rather than in 2024.
+ */
+export function shapeSeed(now: number = Date.now()): ShapedSeed {
+  const at = (days: number) => new Date(now + days * 86_400_000).toISOString();
+  const hoursAgo = (hours: number) => new Date(now - hours * 3_600_000).toISOString();
+
+  return {
+    companies: SEED_COMPANIES.map((c) => ({
+      key: c.key,
+      row: {
+        name: c.name,
+        domain: c.domain,
+        industry: c.industry,
+        size: c.size,
+        createdAt: hoursAgo(240),
+      },
+    })),
+    contacts: SEED_CONTACTS.map((c) => ({
+      company: c.company,
+      row: { name: c.name, email: c.email, title: c.title, createdAt: hoursAgo(200) },
+    })),
+    deals: SEED_DEALS.map((d) => ({
+      company: d.company,
+      contact: d.contact,
+      title: d.title,
+      row: {
+        title: d.title,
+        value: d.value,
+        stage: d.stage,
+        closeDate: at(d.closeInDays),
+        createdAt: hoursAgo(160),
+        updatedAt: hoursAgo(4),
+      },
+    })),
+    activities: SEED_ACTIVITIES.map((a) => ({
+      deal: a.deal,
+      row: { kind: a.kind, body: a.body, createdAt: hoursAgo(a.age) },
+    })),
+  };
+}

package/templates/crm/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/crm/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit",
+    "test": "pylon test"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.0",
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}